See Previous Example First!
In this example we will enhance our buffered ExtJS4 gridpanel by adding a little flash to the “Notes” field. We will use the power of XTemplate to add conditional row icon button switching. We will add a “notes” field to our model and the grid button will display different icons, based on whether notes are present:
The trick is to use XTemplate’s conditional processing inside of our actioncolumn:
Full Source & Demo @ jsFiddle.net
{ header: 'Notes' , width: 40 , xtype: 'templatecolumn' , tpl: '<tpl if="notes">' + '<img src="https://whatisextjs.com/BAHO/icons/note_edit.png" style="cursor:pointer;">' + '</tpl><tpl if="notes==null">' + '<img src="https://whatisextjs.com/BAHO/icons/note.png" style="cursor:pointer;">' + '</tpl>' , listeners: { click: function(g, td) { var record = grid.getSelectionModel().getSelection()[0]; Ext.Msg.alert('Notes', record.data.notes); } // eo click } // eo listeners } |