Ext.ux.CheckColumn
is an extension of Ext.grid.column.Column
that renders a checkbox in each column cell. This checkbox toggles the truthiness of the associated data field on a click. In addition to toggling a Boolean value within the record data, this class adds or removes a CSS class x-grid-checked
, on the <td>
element based on whether or not it is checked to alter the background image used for a column.
Here in the following code we are defining a grid class in which we are using the CheckColumn
extension to provide a checkbox within each cell of a column:
Ext.define('Examples.view.checkcolumn.CheckColumnGrid', { extend : 'Ext.grid.Panel', alias : 'widget.checkcolumngrid', requires : ['Examples.store.DummyStore', 'Ext.ux.CheckColumn'], constructor : function(config) { Ext.apply(this, { border : false, store : Ext.create('Examples.store.DummyStore'), columns : [{ header : 'Name', dataIndex : 'name', flex : 1 },{ header : 'Birth date', dataIndex : 'birthdate', renderer : Ext.util.Format.dateRenderer('m/d/Y') },{ xtype : 'checkcolumn', header : 'Attending?', dataIndex : 'attending' }] }); this.callParent(arguments); } });
Here, in the following screenshot, you can see the result of the CheckColumnGrid
class that we have defined which is used within a window:
You can see the Attending? column, where the CheckColumn
extension has generated the checkboxes that use the store values to determine whether the checkbox should be checked or not.
The available configuration options, properties, methods, and events for this extension is documented at http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.ux.CheckColumn.