ExtJS: CheckboxSelectionmodel

Ingezonden door l.renkema op vr, 03/04/2011 - 17:30

An ExtJS gridpanel can be extended with checkboxes so it is visual which rows are selected.

Therefor the default selectionmodel of the GridPanel should be replaced with the Ext.grid.CheckboxSelectionModel.

var checkboxselection = new Ext.grid.CheckboxSelectionModel({
    singleSelect: true,
});

Then this object is add on two different place to the GridPanel. Don't forget the one in the column configuration, this will be the place where the actual checkboxes are coming.

var grid = new Ext.grid.GridPanel({
    store: store,
    loadMask: true,
    selModel: checkboxselection,
    columns: [
       checkboxselection,
       {header: 'Id', sortable: true, renderer: 'string', dataIndex: 'id' },
       {header: 'Name', sortable: true, renderer: 'string', dataIndex: 'name'}
    ]
});

Extensions

With the selectionmodel handy features can be added to the Grid.
For example add a feature to activate a submit button only when one or more rows are selected.
Therefor we add a listener on the "selectionchange" event as is shown below.

var checkboxselection = new Ext.grid.CheckboxSelectionModel({
    singleSelect: true,
    listeners: {
      'selectionchange' : function() {
        if (this.getCount() == 0) this.grid.saveButton.setDisabled(true); 
        else this.grid.saveButton.setDisabled(false);
      }
    }
});

I use the getCount() method form the SelectionModel to count the amount of selected rows. (When singleselect is true this method will only give 0 or 1 as only one row can be selected)

Full source

Below is the full sourcecode of a working example. The only thing that must be added is a div with id="grid" where te grid should be rendered. You can also change the renderTo: config to render the grid to any other element.

Ext.onReady(function() {
 
  // Create a dummy store
  var store = new Ext.data.ArrayStore({
    fields: ['id', 'name']
  });
 
  store.loadData([[ 1, 'test'], [2, 'profile 2']]);
 
  var checkboxselection = new Ext.grid.CheckboxSelectionModel({
    singleSelect: true,
    listeners: {
      'selectionchange' : function() {
        if (this.getCount() == 0) this.grid.saveButton.setDisabled(true); 
        else this.grid.saveButton.setDisabled(false);
      }
    }
  }); 
 
  var grid = new Ext.grid.GridPanel({
      width: 400,
      height: 200,
      store: store,
      loadMask: true,
      renderTo: 'grid',
      selModel: checkboxselection,
      columns: [
         checkboxselection,
         {header: 'Id', sortable: true, renderer: 'string', dataIndex: 'id' },
         {header: 'Name', sortable: true, renderer: 'string', dataIndex: 'name'}
      ],
      bbar: [
        '->',
        // Provide a button which is disabled by default
        { 
          xtype : 'button', 
          text : 'Save', 
          disabled: true,
          ref: '../saveButton'
        }
      ]
  });
 
});

Tags:

Reacties

Ingediend door Anonymous op wo, 11/30/2011 - 12:43.

How about default check for checkbox ?

beantwoorden

ExtJS: CheckboxSelectionmodel

Extensions

Full source

Reacties

Nieuwe reactie inzenden

Gebruikerslogin

Contactgegevens

Tags