I have an ExtJS grid that has a button set up in it. The button triggers a function that's defined into other JS file that's included in the grid page. The function triggers ok but in that function I want to get the columns count like this:
grid.getColumnModel().getColumnCount()
The problem is that I get an error like: grid.getColumnModel is not a function.
In PHP I would make a "global $ext" and then access that function. How can I do this in Ext ? How can I access the grid from other file ? What needs to be defined ?
Thank you.
How did you define the grid object? Did you do it like this:
var grid = new Ext.grid.GridPanel(...);
If so, the grid object is not in global scope. Remove the "var" and see if it helps.
This looks like a scope issue. See variable scope in JavaScript.
Basically, you can do:
my_global_grid = ... // accessible in the current ~global~ context (document, window)
var my_local_grid = ... // accessible only in the function
window.my_window_global_grid = ... // accessible in the same window
You might also pass the grid object into your function as an argument:
function myFunction(arg1,arg2,grid){
...
var count = grid.getColumnModel().getColumnCount();
...
}
Related
Hey guys I have the following function its working ok but I think it could be better.
methods: {
onFileChange(e, filedName) {
console.log(e.target.files);
console.log(filedName);
const file = e.target.files[0];
const fileToCheck=document.getElementById(filedName);
console.log(fileToCheck);
if(filedName=='thumbnail1'){
if(fileToCheck.value!=''){
this.thumbnail1 = fileToCheck;
this.thumbnail1Url= URL.createObjectURL(file);
} else {
this.thumbnail1=null;
this.thumbnail1Url=null;
}
}
if(filedName=='thumbnail2'){
if(fileToCheck.value!=''){
console.log(fileToCheck);
this.thumbnail2=fileToCheck;
this.thumbnail2Url = URL.createObjectURL(file);
} else {this.thumbnail2=fileToCheck; this.thumbnail2Url=null;}
}
},
Instead of checking the value for
if(fieldName == "something"){
this.something = URL.createObjectURL(file)
}
I would simply pass in a string of the fieldName and bind to it dynamically by just typing this.fieldName (filedName could equal thumbnail1 or thumbnail2 or chicken for all I care I just want to be able to pass in the name of the data atrribute and bind to it that way) but when ever I do this it doesn't work. Any help here would be great.
It's not completely clear to me what you want to accomplish, but I think you're asking about creating a dynamic data property for a view component. If that's the case, there are a couple of things to consider.
First, the example you cite, this.fieldName is not correct JavaScript syntax if fieldName is a string that contains a property name. The correct version is this[fieldName].
Note, though, that you can't simply define a new data property for a Vue component by setting it to a value. That's a limitation of JavaScript that's described in the Vue documentation. If data[fieldName] is an existing property that's defined in the component's data object, then you'll be okay. Even if you don't know the value of the property, you can initialize it, for example, with a value of null and then update the value in your method. Otherwise, you'll need to add the property to an existing non-root-level property as the documentation explains.
You can add static form object's like selects & inputs to datatable columns as shown here:
https://datatables.net/examples/api/form.html
But I'm trying to add custom bootstrap widgets. Like TouchSpin found here:
http://www.virtuosoft.eu/code/bootstrap-touchspin/
When I initialize TouchSpin it only initializes the objects on the first datatables page shown, the objects on the second/third pages are not initialized.
Anyone have an idea how to fix this? Its probably because the second/third pages are not part of the DOM yet?
What you need to hook into is the "drawCallback" function. You can specify it in the options when creating the DataTable. It would look something like this:
var table = $('#example').DataTable({
//... Your other options ... //
drawCallback: function(settings) {
// This callback is called when the draw is complete which happens on:
// paging, sorting, and of course when you call ".draw()". The current
// DataTable page is in the DOM with all the HTML.
// You can get the jquery element for the table like this.
var dataTableJqueryObj = $(this);
// You can get the API object like this.
var apiDataTableObj = this.api();
// Initialize your controls ...
}
});
Let me know if you have any other questions.
First of all: this site has been a great help already to me, thnx a lot!
In a Google doc I am adding a vertical panel to assist the user in composing and sending a letter. I used the example in this thread and it works fine showing the panel:
function onOpen() {
var app = UiApp.createApplication().setWidth(455).setTitle('User input')
var panel = app.createVerticalPanel().setStyleAttribute('padding','25px')
var label1 = app.createLabel('Your name please');
var box1 = app.createTextBox().setId('Field1').setName('Field1');
panel.add(label1)
panel.add(box1)
var pasteHandler = app.createServerChangeHandler('readTextbox');
pasteHandler.addCallbackElement(panel);
var clickButton=app.createButton('OK').setId('PasteTest').addClickHandler(pasteHandler)
panel.add(clickButton);
app.add(panel);
DocumentApp.getUi().showSidebar(app);
//I want to arrive here only after a value is entered in the panel
// ... follows more code ...
}
function readTextbox(e){
var app = UiApp.getActiveApplication();
var boxValue=e.parameter.Field1;
//how to get this e.parameter values (more than one..) to the main function
return app;
}
My question is: how to make the main function wait after 'showSidebar' until a value is entered?
Second question: how to use this input outside the handler, e.g. for writing in the document? I found a workaround by writing the fields to a spreadsheet within the handler, but that's not very elegant ;-)
Many thanks in advance...
You can't make the onOpen() function wait, but you don't need to. You have a click handler and the readTextbox() function. And you don't need to get the readTextbox() function to branch back to the onOpen() function. If there are conditions that require branching to different functions depending on what the user does, then you can create a new function.
You can call a function from a function just by using it's name, and parenthesis after the name and a semicolon.
function readTextbox(e){
var app = UiApp.getActiveApplication();
var boxValue=e.parameter.Field1;
anotherCoolFunction(boxValue);
//how to get this e.parameter values (more than one..) to the main function
return app;
}
function anotherCoolFunction(someArg){
Logger.log('Some Arg: ' + someArg);
}
In the above code, after the name is entered and the user clicks the button, the readTextBox function runs, then the readTextBox() function calls the anotherCoolFunction(boxValue); function and passes the variable boxValue to the anotherCoolFunction().
You can verify that it works, by looking at the log. Choose the View Menu, and the Logs menu item to display the Log output.
I have "file1.js" with the following code where I create a element script to call another js file named test.js
var property = 'email';
var NewScript=document.createElement('script');
NewScript.src="/js/test.js?property="+property;
document.body.appendChild(NewScript);
The code work fine because call (or insert) the file "test.js" my problem is that I also want to send a variable to "test.js" to use it there, I dont know how to send/receive this variable in that way, any help ?
This is what I should have in "test.js"
alert(property);
but how do I receive this variable?
No you can't pass a querystring parameter to a javascript file like that. What I've seen done is to set the variable in script before you create your new javascript file reference. Which is kind of what you are doing above, but you need to declare your property variable outside whatever function you have this code in. So for example if you have this code in a jQuery document ready function it would look something like this:
var property = 'email';
$(document).ready(function () {
var NewScript = document.createElement('script');
NewScript.src = "/js/test.js";
document.body.appendChild(NewScript);
});
This will allow your property variable to stay in scope for your external file. HTML JavaScript Include File Variable Scope
I am making Titanium mobile project where I want to make one global function which I can use throughout the application. For that I have created other .JS file where I have defined the function and I am including that .JS file where I need to use this function and I am successfully able to call the function.
But My question is :
Can I create new Window in that function? As I have added one Label and one MapView in that window but it is not showing, while at the start of function I have added alert('FunctionCalled'), it is showing me alert but not showing me the label I have added in the window.
So anybody can help me to find out whether we can open window through function. If yes then any sample example, so that I can find out what mistake I am making.
Thanks,
Rakesh Gondaliya
you approach CAN work but is not a best practice, you should create a global namespace, add the function to that namespace and then only include the file with the function once in app.js
// apps.js
var myApp = {};
Ti.include('global.js','ui.js');
myApp.ui.openMainWindow();
then we create a seperate file for our ui functions
//ui.js
(function(){
var ui = {};
ui.openMainWindow = function() {
// do open window stuff
// call global function
myApp.global.globalFunction1();
}
myApp.ui = ui;
})();
here is where we create our global functions, we will not have to include the file everywhere since we are adding it to our global namespace
//global.js
(function(){
var global = {};
global.globalFunction1 = function() {
// do super global stuff
}
myApp.global = global;
})();
this is a simple outline of how it can be implemented, I have a complete code listing on my blog
Yes you can create a new window or add a label or anything else. If you wanted to add a label to the current window then you would do:
var helloWorld = Ti.UI.createLabel({ text: "Hello World", height: "auto", width: 200 });
Ti.UI.currentWindow.add(helloWorld);
It won't matter where the code is executing because Ti.UI.currentWindow will be the active window regardless.