javascript - Extjs 4 : grid with more selType

Question

我正在尝试弄清楚如何使用不同的 selType 定义 Ext.grid.Panel。

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

那么，有什么方法可以在单个网格上定义不同的selType吗？

Answer 1

好的，可以在同一个网格中同时配置 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'
    }
  }]
});