PDA

View Full Version : GRID.ON - CLICK - PASS VALUE TO OTHER FUNCTION



xerrano
14 Aug 2007, 7:34 PM
I have a main javascript function like this:



function talktoflash(str){ SetCookie('mlsid', str,1); makeCall(str, 6);}


How can I pass the "str" value generated in my grid.on function to it:



grid.on('rowdblclick', function(grid, rowIndex, e) {
rec = ds.getAt(rowIndex);
str = rec.get('propid');
});


The talktoflash() function it's outise the EXT scope.


Thanks

brian.moeskau
14 Aug 2007, 7:50 PM
PLEASE DON'T YELL. You'll want to specify the scope in your event handler declaration:

http://extjs.com/deploy/ext/docs/output/Ext.EventManager.html#addListener

xerrano
14 Aug 2007, 8:29 PM
Pardon my ignorance brian; Im really a newbie. :"> For this just once can you show me how can I pass the value "str" generated when double click on my grid? When I test: Ext.MessageBox.alert(value); it pups up a message with the correct value ut I just don't know how to pass the value to other function placed in head tags.

The talktoflash function is a javascript placed inside the head tags



grid.on('rowdblclick', function(grid, rowIndex, e) {
rec = ds.getAt(rowIndex);
value = rec.get('propid');
talktoflash(value);
});




function talktoflash(str){****do stuff using str****};


Thanks again

brian.moeskau
14 Aug 2007, 9:37 PM
Well, scope somewhat depends on how all of your code is structured. If all you have is global JavaScript functions, then they should all be in window scope anyway and what you have should technically work. For example, here's a test that works as expected with no particular scope set calling a global function similar to what you're doing:



<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="../../ext-2.0/resources/css/ext-all.css">
<script type="text/javascript" src="../../ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-2.0/ext-all-debug.js"></script>
<script>
function talktoflash(str){
alert(str);
};
var Example = {
init : function(){
Ext.get('foo').on('click', function(){
talktoflash('Hello flash!');
});
}
};
Ext.onReady(Example.init, Example);
</script>
</head>
<body>
<input type="button" id="foo" value="Talk to Flash" />
</body>
</html>


A better way to do it would be to wrap all of your code into some kind of class/application structure, which is where scope becomes a lot more important. Review this slightly improved version of the previous example:



<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Test Page</title>
<link rel="stylesheet" type="text/css" href="../../ext-2.0/resources/css/ext-all.css">
<script type="text/javascript" src="../../ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-2.0/ext-all-debug.js"></script>
<script>
var Example = {
init : function(){
Ext.get('foo').on('click', function(){
this.talkToFlash('Hello flash!');
}, this);
},

talkToFlash : function(str){
Ext.Msg.alert('Flash', str);
}
};
Ext.onReady(Example.init, Example);
</script>
</head>
<body>
<input type="button" id="foo" value="Talk to Flash" />
</body>
</html>


Note the "this" that was added as the third argument to the .on() call. This is the scope being passed into the handler so that the "this" variable points at the Example class rather than the global window object. If you remove that argument, you'll get the error "this.talkToFlash is not a function" because the scope will be wrong. Hopefully that makes sense -- play around with it yourself, and also check out some of our beginner tutorials and JavaScript references under the Learn section.

xerrano
14 Aug 2007, 9:49 PM
Thanks brian, these are very "graphical" examples, I think I have a clear view about scopes and how to target them.


Thanks again

Joy
14 Aug 2007, 10:01 PM
Thanks a lot, Brian. Very useful information

damsfx
9 Oct 2007, 3:02 AM
Example = function(){
var myGrid;
var myDataStore = new Ext.data.Store({
...
});
var myColumnModel = new Ext.grid.ColumnModel([{
...
]);

return {
init : function(){
myGrid = new Ext.grid.Grid('Grid_Client', {
ds: myDataStore,
cm: myColumnModel,
autoExpandColumn : "site",
loadMask: {msg :'Loading ...'}
});
myGrid.on("rowclick", function(){
this.onGridClick(); // return this.onGridClick is not a function
onGridClick(); // return onGridClick is not defined
}, this )
myGrid.render();
},
onGridClick : function(){
// do something here
}
};
}();

Ext.EventManager.onDocumentReady(Example.init, Example, true);
What's wrong ??
Help will be welcome to understand.

mdelanno
10 Oct 2007, 11:41 AM
Use the var keyword
A ; was missing
Don't use the third parameter of onReady



var Example = function(){
var myGrid;
var myDataStore = new Ext.data.Store({
...
});
var myColumnModel = new Ext.grid.ColumnModel([{
...
]);

return {
init : function(){
myGrid = new Ext.grid.Grid('Grid_Client', {
ds: myDataStore,
cm: myColumnModel,
autoExpandColumn : "site",
loadMask: {msg :'Loading ...'}
});
myGrid.on("rowclick", function(){
this.onGridClick();
}, this);
myGrid.render();
},
onGridClick : function(){
// do something here
}
};
}();

Ext.onReady(Example.init, Example);