See Previous Example First!
In this example I’ll show you a slightly different approach to adding buttons to a buffered ExtJS4 grid – using templatecolumn. We will add an img element to the HTML markup and intercept click events on the whole table cell. This also lets us enhance normal text cells:
Full Source & Demo @ jsFiddle.net
All work is done in the column configuration:
{ header: 'Notes' , width: 40 , xtype: 'templatecolumn' , tpl: '<img src="https://whatisextjs.com/BAHO/icons/note.png" style="cursor:pointer;">' , listeners: { click: function(g, td) { var record = grid.getSelectionModel().getSelection()[0]; Ext.Msg.alert('Notes','Notes for: ' + record.data.name); } // eo click } // eo listeners },{ header: 'Name' , flex: 1 , xtype: 'templatecolumn' , tpl: '<img src="https://whatisextjs.com/BAHO/icons/user_go.png" style="cursor:pointer;"> {name}' , listeners: { click: function(g, td) { var record = grid.getSelectionModel().getSelection()[0]; Ext.Msg.alert('User','View user: ' + record.data.name); } // eo click } // eo listeners } |
One thought on “ExtJS 4 Grid Button (2)”