For usability reasons it is usually a good idea to add a delete button to each row of a data grid. If the user clicks on such a button, the whole row that contained the button will be deleted.
The data grid of ExtJS does not contain such a feature by default, but it could be implemented by adding a special column to the column model. Using this extension, it could be easily done like this:
var itemDeleter = new Extensive.grid.ItemDeleter();
var grid = new Ext.grid.GridPanel({
store: people,
cm: new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(), {
header: 'First name',
width: 100,
dataIndex: 'firstName'
}, {
header: 'Last name',
width: 150,
dataIndex: 'lastName'
}, itemDeleter]),
selModel: itemDeleter,
autoHeight: true
});
Note that the itemDeleter
instance must be added to the ColumnModel
and set as selModel
to work properly.