The CheckColumn extension

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:

The CheckColumn extension

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.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset