View Full Version : handler inside toolbar

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)

this is my piece of code to run.

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

itemId: 'toolBar',





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

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

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

22 Aug 2011, 6:41 AM

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.