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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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.