PDA

View Full Version : handler inside toolbar



tommytob
22 Aug 2011, 4:50 AM
I have question,

I have toolbar with items which have handler, in the handler I want to use a function which is defined in the extended class.

I want to call the function onButtonClick


Ext.define('App.view.Show', {
extend: 'Ext.panel.Panel',
.......
onButtonClick: function(model, element)
{
console.log("test");
}


this is my piece of code to run.



Ext.define('App.view.risk.Show', {
extend: 'App.view.Show',
....
tbar : {

itemId: 'toolBar',

items:[

{

text:'Bewerken',

action:'edit',

tooltip:'Set options',

iconCls:'button edit',

handler: this.onButtonClick()

},



the this.onButtonClick must call the function inside the extended class.
only the this is the button object.
that's is clear to me, but if I can't use this what should I use then.

greetz thomas

tobiu
22 Aug 2011, 6:16 AM
you can change the scope.



listeners : {
myEvent : function(){...},
scope : this
}

christocracy
22 Aug 2011, 6:41 AM
Note:


handler: this.onButtonClick()


When you attach the function parenthesis to this.onButtonClick, the function executes IMMEDIATELY at that instant in time.

What you want to do is attach a reference to the method instead. That method reference will be called at the point in time when the button is clicked.



handler: this.onButtonClick


And yes, as @tobiu said, you may also attach an option scope for your method reference to execute in.



handler: this.onButtonClick,
scope: this


If you don't provide a scope, the method will execute in the scope of the Button itself.