Extjs 4:具有更多selType的网格

时间:2012-10-05 09:15:32

标签: javascript extjs grid extjs4 multi-select

我正在尝试弄清楚如何定义Ext.grid.PanelselType不同。

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

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

2 个答案:

答案 0 :(得分:2)

好的,可以在同一网格中配置selTypeselModel

以下是一个例子:

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

答案 1 :(得分:-2)

它不能!

grid.getSelectionModel().getCurrentPosition().column

不是当前的编辑。