Extend Grid about this error

[boyjunqiang]

I creat a user extend Grid ---Ext.ux.DelGrid (in Ext.ux.DelGrid.js)which extend EditorGrid in ext;
when create a Ext.ux.DelGrid,the paging footbar and a Delet botton will show I the grid bottom;
but I have some trouble:

when I press the Delete button on the GridFoot, the fireBug report:

this.getSelections is not a function
doDel()Ext.ux.SearchGrid... (line 48)
onClick(Object browserEvent=Event blur button=-1 type=blur)ext-all-debug.js (line 15060)
h(Object browserEvent=Event blur button=-1 type=blur)ext-all-debug.js (line 1488)
getViewWidth(click clientX=0, clientY=0)ext-base.js (line 10)
[Break on this error] var m = this.getSelections();

I think it's because the "this" in this.doDel is ref to foreigner_in_company_paging,but not the Ext.ux.DelGrid I create;
Can some one tell me how can I make the "this" in this.doDel ref to Ext.ux.DelGrid which I create?


Ext.ux.DelGrid.js:

Ext.ux.DelGrid = function(container, config){
Ext.ux.DelGrid.superclass.constructor.call(this, container, config);
this.cm = config.cm;
this.ds = config.ds;
};

Ext.extend(Ext.ux.DelGrid, Ext.grid.EditorGrid, {

doDel : function(){
var m = this.getSelections();
var ds = this.ds;
if(m.length > 0)
{
Ext.MessageBox.confirm('Message', 'Do you really want to delete them?'
,function(btn){
if(btn == 'yes'){
var jsonData = "[";
for(var i = 0, len = m.length; i < len; i++){
var ss = "{\"id\":\"" + m[i].get("incompanyid") + "\"}";
if(i==0)
jsonData = jsonData + ss ;
else
jsonData = jsonData + "," + ss;
ds.remove(m[i]);
}
jsonData = jsonData + "]";
ds.load({params:{start:0, limit:PageSize, action:"delete", delIds:jsonData}});
ds.load({params:{start:0, limit:PageSize}});
}
}
);
}
else
{
Ext.MessageBox.alert('Error', 'Please select at least one item to delete');
}
},

showPagingToolbar : function(){
var ds = this.ds;
var doDel = this.doDel;
foreigner_in_company_grid_foot = this.getView().getFooterPanel(true);
foreigner_in_company_paging = new Ext.PagingToolbar(foreigner_in_company_grid_foot, this.ds, {
pageSize: PageSize,
displayInfo: true,
displayMsg: 'total {2} results found. Current shows {0} - {1}',
emptyMsg: "not result to display"
});
foreigner_in_company_paging.add('-', {
pressed: false,
enableToggle:false,
icon: 'famfamfam_silk_icons_v013/icons/table_delete.png',
text: 'Delete',
cls: 'x-btn-text-icon'
,handler: this.doDel
});
}
});



Company.js://use the Ext.ux.DelGrid

foreigner_in_company_grid = new Ext.ux.DelGrid('foreignerInCompany-editor-grid', {
ds: foreigner_in_company_ds,
cm: foreigner_in_company_cm,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
enableColLock:true
});
foreigner_in_company_grid.showPagingToolbar();

[Animal]

The following code means that doDel is going to be caled in the global scope. That is the "this" object will be the window.


foreigner_in_company_paging.add('-', {
pressed: false,
enableToggle:false,
icon: 'famfamfam_silk_icons_v013/icons/table_delete.png',
text: 'Delete',
cls: 'x-btn-text-icon'
,handler: this.doDel
});


Reading the docs of http://extjs.com/deploy/ext/docs/output/Ext.Toolbar.html#add

Leads you to the docs for Toolbar.Button

http://extjs.com/deploy/ext/docs/output/Ext.Toolbar.Button.html#config-scope

See the "Learn" section, and the sticky threads about scope.

[boyjunqiang]

thanks very much I will try to read the doc

[boyjunqiang]

I can't do it:">
can Animal tell me what code should add ?
maybe it's scope : this.*** ?

[Animal]

Well, what do you want "this" to be inside doDel?

[boyjunqiang]

I want this ref to my grid,
I know I am missing the Scope, it's right:

foreigner_in_china_paging.add('-', {
pressed: false,
enableToggle:false,
icon: 'famfamfam_silk_icons_v013/icons/table_delete.png',
text: 'Delete',
//cls: '',
//cls: 'x-btn-text-icon btn-search-icon',
cls: 'x-btn-text-icon'
// ,handler: this.doDel.call(o2)
,handler: this.doDel
,scope: this
});

[boyjunqiang]

thanks animal !!! I get help from this topic:
http://extjs.com/forum/showthread.php?t=11594&highlight=handler+scope