I have been working with ExtJS 4 these days. The framework provides new MVC architecture help their sheeps to improve the flexibility of the application. Remember the Design Pattern principle "close to modify but open to extend". Ok, let go to the main point of this entry.
To create an action column in a data-grid:
columns: [
{
header : 'Name',
dataIndex : 'name',
width: 150,
editor: {allowBlank: false}
},
{
header : 'Email',
dataIndex : 'email',
flex: true,
editor: {allowBlank: false, vtype: 'email'}
},
{
xtype: 'actioncolumn',
width: 30,
align: 'center',
items: [
{
icon: 'images/delete.gif',
tooltip: 'Please delete me',
iconCls:'act-destroy',
handler: function(grid, rowIndex, colIndex) {
console.log("clicked on me!!!!");
}
}
]
}
]
init: function() {
this.control({
'userlist actioncolumn': {
click: this.handleUserClickAction
}
});
},
handleUserClickAction: function(view, cell, rowIndex, colIndex, e) {
var m = e.getTarget().className.match(/\bact-(\w+)\b/);
if (m === null || m === undefined) {
return;
}
var action = m[1];
switch (action) {
case 'destroy':
var store = this.getStore('Users');
var store = this.getStore('Users');
var record = store.getAt(rowIndex);
store.remove(record);
break;
}
}
PS: The stuff is available here