Removing a record from store in an editable grid - extjs3

Question

I created an editable grid with local data from Array Store. Now I put an actionColumn to delete the record from the store. But the delete is not happening and the record is still present.
Please see my code below:-
this.empdata = [
[ 'Anea etet','andreeas#jhggf.com','active' ],
[ 'Bharfdna ivasdsh','bfanas#dsgfsd.com','active' ],
[ 'Crfg gfdgdtt', 'ffigh#dfsd.com', 'away' ],
[ 'Gfdgdis Perron','geffgsp#fdhd.com', 'away' ]
];
this.employee = new Ext.data.ArrayStore({
autoSync: true,
fields : [ {
name : 'name'
}, {
name : 'email'
}, {
name : 'status'
}],
data : this.empdata
});
var cm = new Ext.grid.ColumnModel([{
header: 'Name',
dataIndex: 'name',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
allowBlank: false,
vtype: 'email'
}
}, {
header: 'Status',
dataIndex: 'status',
editor: {
allowBlank: false
}
}, {
xtype: 'actioncolumn',
width: 50,
items: [
{
icon : 'src/images.jpg',
tooltip: 'Delete record',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Delete " + rec.get('name'),function(btn,text){
if (btn == 'ok'){
grid.getStore().removeAt(rowIndex);
grid.getStore().sync();
}
})
}
}]
}]);
this.grid = new Ext.grid.EditorGridPanel({
store: this.employee,
cm: cm,
xtype: 'editorgrid',
title: 'Employee Data',
clicksToEdit: 1,
frame: true,
stripeRows : true,
width: 1000,
height: 500,
region: 'south',
viewConfig : {
forceFit : true,
scrollOffset : 0,
}
});
this.grid.on('validateedit', function(e) {
if (e.field === 'status'){
if(!((e.value === 'active')||(e.value === 'away')||(e.value === 'offline'))){
e.cancel = true;
e.record.data[e.field] = e.originalValue;
}
}
});
var win = {
layout: {
type: 'vbox',
align: 'center',
pack: 'top',
padding: 30
},
items: [this.grid]
};
Ext.apply(this, win);
When i click on delete button,a pop-up comes up asking fro confirmation.When I click 'ok' it should delete the record,but nothing happens.
Please suggest what's wrong with the code.

Answer 1

You use alert in yor handler it only accepts one parameter - message. If you want confirm, the best way is to use Ext.Msg.confirm. Example:
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
Ext.Msg.confirm(
"Delete " + rec.get('name'),
"Delete " + rec.get('name'),
function(btn){
if (btn == 'yes'){
grid.getStore().removeAt(rowIndex);
grid.getStore().sync();
}
}
);
}