Question

I’m trying to figure out how to define an Ext.grid.Panel with different selType.

Actually, I need a grid that allows me to select both single cells and rows (with checkbox).
In the first case it needs to define selType config as cellmodel but in the second case it needs selType configured as checkboxmodel. Unfortunately, selType accepts a string not an array.

So, is there any way to define different selType on a single grid?

Answer 1

Ok, it’s possible to configure both a selType and a selModel in the same grid.

Here’s an example:

// Store
var store = Ext.create ('Ext.data.Store', {
  fields: ['name', 'surname'] ,
  data: [
    {name: 'foo', surname: 'bar'} ,
    {name: 'too', surname: 'tar'} ,
    {name: 'zoo', surname: 'zar'} ,
    {name: 'coo', surname: 'car'} ,
    {name: 'boo', surname: 'bar'}
  ]
});

And then the grid:

// Dual selection grid
Ext.create ('Ext.grid.Panel', {
  title: 'My Grid' ,
  store: store ,
  width: 300 ,
  height: 300 ,
  renderTo: Ext.getBody () ,

  selModel: Ext.create ('Ext.selection.CheckboxModel') ,
  selType: 'cellmodel' ,
  plugins: {
    ptype: 'cellediting' ,
    clicksToEdit: 1
  } ,

  columns: [{
    text: 'Name' ,
    dataIndex: 'name' ,
    editor: {
      xtype: 'textfield' ,
      allowBlank: false
    }
  } , {
    text: 'Surname' ,
    dataIndex: 'surname' ,
    editor: {
      xtype: 'textfield'
    }
  }]
});

But it’s also possible to follow the way suggested by A1rPun, to put it better use more selType with hierarchy:

// Base grid with cellediting plugin and cellmodel as selType
Ext.define ('CellEditGrid', {
  extend: 'Ext.grid.Panel' ,
  selType: 'cellmodel' ,
  plugins: {
    ptype: 'cellediting'
    clicksToEdit: 1
  }
});

// Adds the checkboxmodel selType to the base CellEditGrid
Ext.define ('DualSelectionGrid', {
  extend: 'CellEditGrid' ,
  selType: 'checkboxmodel' ,
  multiSelect: true
});

// Finally, we got our dual selection grid (cellmodel and checkboxmodel)
Ext.create ('DualSelectionGrid', {
  title: 'My Grid' ,
  store: store ,
  width: 300 ,
  height: 300 ,
  renderTo: Ext.getBody () ,

  columns: [{
    text: 'Name' ,
    dataIndex: 'name' ,
    editor: {
      xtype: 'textfield' ,
      allowBlank: false
    }
  } , {
    text: 'Surname' ,
    dataIndex: 'surname' ,
    editor: {
      xtype: 'textfield'
    }
  }]
});