What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

21Dec/110

ExtJS 4 Grid Button (2)

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="http://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="http://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
}
VN:F [1.9.22_1171]
Rating: 7.8/10 (8 votes cast)
ExtJS 4 Grid Button (2), 7.8 out of 10 based on 8 ratings
Comments (0) Trackbacks (1)

Leave a comment

* Copy This Password *

* Type Or Paste Password Here *