PDA

View Full Version : Extending and scope question



paulharv
7 May 2010, 9:09 AM
I'm extending an EditorGridPanel which in skeleton form looks like this...



Ext.ns('Gluuee');
Gluuee.LogPanel = Ext.extend(Ext.grid.EditorGridPanel, {
...
initComponent : function() {
this.remoteJsonStore = this.createRemoteJsonStore();
...
this.bbar = this.pagingToolbar();
Gluuee.LogPanel.superclass.initComponent.call(this);
},
pagingToolbar : function(){
return {
xtype : 'paging',
store : this.remoteJsonStore,
items : [
{
text : 'Save Changes',
handler : function(){
// !!! PROBLEM IS HERE - this.remoteJsonStore is undefined !!!
var modified = this.remoteJsonStore.getModifiedRecords({
newRecordId : Ext.id()
});
},
}
]
}
},
createRemoteJsonStore : function(){
return new Ext.data.JsonStore({...})
}
...
}
Much of it is working - the grid loads, paging works, but I can't get the handler for the custom 'Save Changes' button to work.
It's a scoping issue - the handler's attempt to do "this.remoteJsonStore.getModifiedRecords()" produces a "this.remoteJsonStore undefined" error.

How should I get a reference to remoteJsonStore in the handler? (I've tried this.store among others)

Thanks

paulharv
7 May 2010, 9:58 AM
Not sure if this is best practice (would appreciate comments), but now I'm doing this and it all works...



Ext.ns('Gluuee');
// NAMESPACED REMOTEJSONSTORE DEFINED
Gluuee.remoteJsonStore = new Ext.data.JsonStore({
...
});
// EXTEND
Gluuee.LogPanel = Ext.extend(Ext.grid.EditorGridPanel, {
...
initComponent : function() {
this.remoteJsonStore = this.createRemoteJsonStore();
...
this.bbar = this.pagingToolbar();
Gluuee.LogPanel.superclass.initComponent.call(this);
},
pagingToolbar : function(){
return {
xtype : 'paging',
store : this.remoteJsonStore,
items : [
{
text : 'Save Changes',
handler : function(){
// !!! USE NAMESPACED REMOTEJSONSTORE !!!
var modified = Gluuee.remoteJsonStore.getModifiedRecords({
newRecordId : Ext.id()
});
},
}
]
}
}
...
}

evant
7 May 2010, 9:24 PM
Not a good way to do it.

Add a scope to the button handler.



{
text: 'Foo',
scope: this,
handler: function(){}
}