javascript - Extjs 4:具有更多selType的网格

我试图弄清楚如何用不同的Ext.grid.Panel定义selType。

实际上，我需要一个允许我同时选择单个单元格和行的网格（带有复选框）。
在第一种情况下，它需要将selType配置定义为cellmodel，但是在第二种情况下，它需要将selType配置为checkboxmodel。不幸的是，selType接受字符串而不是数组。

那么，有没有办法在单个网格上定义不同的selType？

最佳答案

好的，可以在同一网格中同时配置selType和selModel。

这是一个例子：

// 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'}
  ]
});

然后是网格：

// 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'
    }
  }]
});

但是也可以遵循A1rPun建议的方法，使其更好地在层次结构中使用更多的selType：

// 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'
    }
  }]
});