PDA

View Full Version : Extending and button scope help



panter4
11 Feb 2011, 6:07 AM
i realy did my best searching, so please be gentle and dont just reply with RTFM :)

i have the following
(simplified code for easier reading)


MyPanel=Ext.extend(Ext.grid.GridPanel,{
extraButtons:[],
useButtons:[],//not important
//other configs


buildToolbar: function(buttonNamesList){
var toolbar=new Array();
//buttonNamesList handling

//other button handling

Ext.each(this.extraButtons,function(item,index){
toolbar.push(item);
},this);

//more other button handling

return new Ext.Toolbar(toolbar);
},

initComponent : function() {
this.counter=new Array();
//stuff
this.tbar=this.buildToolbar(this.useButtons);
}

});



myExtendedPanel=Ext.extend(MyPanel,{
//lots of configs
extraButtons:[
{
xtype:'button',
scope:this,
handler:function(){
Ext.Msg.confirm('question'+this.counter.length, function(btn, text){
if (btn == 'yes'){
//ajax request and other handling using this.counter, this.store and other members of the MyPanel class
},this);
}
}
]

});

var thePanel=new myExtendedPanel();


everything else works fine, everything shows up as intended, however
when i click on the button i get this.counter is undefined error.
what am i doing wrong?
and how to properly add buttons in an extended class so that button handlers can access the parrent class members and methods

panter4
12 Feb 2011, 7:52 PM
after days of searching and carefully reading tutorials and general tips on JS OOP i still dont understand what i did wrong

i did manage to create an ugly fix:



Ext.each(this.extraButtons,function(item,index){
Ext.apply(item,{scope:this});
toolbar.push(item);
},this);

evant
12 Feb 2011, 8:08 PM
The answer is in the docs:

http://dev.sencha.com/deploy/dev/docs/?class=Ext.Button&member=scope


The scope (this reference) in which the handler and toggleHandler is executed. Defaults to this Button.