What Is ExtJS ExtJS 4+ Extensions Examples Tutorials

19Dec/110

ExtJS 4 Grid Button (1)

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

Leave a comment

* Copy This Password *

* Type Or Paste Password Here *