What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

24Dec/110

ExtJS 4 Grid Button (3)

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="http://whatisextjs.com/BAHO/icons/note_edit.png" style="cursor:pointer;">'		+ '</tpl><tpl if="notes==null">'		+ '<img src="http://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
}
VN:F [1.9.22_1171]
Rating: 8.4/10 (10 votes cast)
ExtJS 4 Grid Button (3), 8.4 out of 10 based on 10 ratings
Comments (0) Trackbacks (0)

No comments yet.


Leave a comment

* Copy This Password *

* Type Or Paste Password Here *

No trackbacks yet.