In this tutorial series we’ll walk through various approaches for setting up buttons inside ExtJS grid. We will use Sencha’s buffered grid example as base grid. This example will demonstrate ExtJS 4 native capabilities – via the actioncolumn:
Full Source & Demo @ jsFiddle.net
These buttons are not true ExtJS 4 “Components” – they even use different markup (img vs span on regular buttons). They do not support many features of normal buttons, i.e. “style”, but give you extra functionality to work with the underlying data:
... // grid columns columns:[{ xtype: 'rownumberer', width: 40, sortable: false },{ xtype: 'actioncolumn' , width: 40 , items: [{ // Delete button icon: 'https://whatisextjs.com/BAHO/icons/cancel.png' , handler: function(grid, rowIndex, colindex) { // Working with grid row data var record = grid.getStore().getAt(rowIndex); Ext.Msg.alert('Delete', 'Delete user: ' + record.data.name); } // eo handler },{ // Save Button icon: 'https://whatisextjs.com/BAHO/icons/disk.png' // style no go :( , style: 'margin-left: 5px;' , handler: function(grid, rowIndex, colindex) { // Working with grid row data var record = grid.getStore().getAt(rowIndex); Ext.Msg.alert('Save', 'Save user: ' + record.data.name); } // eo handler }] } ... |
2 thoughts on “ExtJS 4 Grid Button (1)”