javascript - 我可以在ExtJS的网格面板单元格上设置多选功能吗？

我可以在网格面板单元格上设置多选功能吗？

大家好，我是ExtJS的新手，我想知道是否有办法选择多选网格CELLS或给人一种多选错觉。所谓“错觉”，是指在单击时动态更改单个单元格的CSS，以使其看起来像已切换。

以下是我的“网格”窗口中的代码
码：

Ext.create ('Ext.window.Window' , {    title: this.id,
    width: 500 ,
    closeAction: 'hide',
    height: 500 ,
    modal: true,
    centered: true,
    items: [{
        xtype: 'gridpanel',
        sortable: false,
        allowDeselect: true,
        columnLines: true,
        header: false,
        sortableColumns: false,
        border: false,
        columns: [{
            xtype: 'gridcolumn',
            dataIndex: 'ID',
            text: 'ID',
            flex: 2
        },
        {
            xtype: 'gridcolumn',
            dataIndex: 'Title',
            text: 'Title',
            flex: 3
        },
        {
            xtype: 'gridcolumn',
            dataIndex: 'Beginner',
            text: 'Beginner',
            flex: 5
        },
        {
            xtype: 'gridcolumn',
            dataIndex: 'Intermediate',
            text: 'Intermediate',
            flex: 5
        },
        {
            xtype: 'gridcolumn',
            dataIndex: 'Advanced',
            text: 'Advanced',
            flex: 5
        }],
        // One header just for show. There's no data,
        store: Ext.getStore('disciplinesStore')
    }]
    selModel: Ext.create('Ext.selection.CellModel', {
            allowDeselect: true,
            listeners: {
            select: {
                  fn: me.onCellModelSelect,
                  scope: me
                    }
              }
        })
}).show ();

接着

onCellModelSelect: function(cellmodel, record, row, column, eOpts) {

        if(column === 2){
            stuff = 'Beginner';
        }else if(column === 3){
            stuff= 'Intermediate';
        }else if(column === 4){
            stuff = 'Advanced';
        }
        Ext.Msg.alert('asd',record.get(stuff));
    }

最佳答案

我实现了另一种解决方法。

而不是应用不允许mode: 'MULTI'的单元格选择器，而是将每一列划分为单独的表，然后对它们应用行选择器或复选框选择器，然后将其设置为MULTI。奇迹般有效。

作为其他有相同问题的参考，它现在看起来像这样



初级，中级和高级列的代码已被单个表替换，并具有行选择器功能，如下所示

{
 xtype: 'gridpanel',
 flex: 2.5,
 autoRender: false,
 id: 'thegrid',
 style: 'white-space:normal',
 width: 723,
 header: false,
 title: 'My Grid Panel',
 allowDeselect: true,
 columnLines: true,
 sortableColumns: false,
 store: 'disciplinesStore',
 columns: [
     {
          xtype: 'gridcolumn',
          dataIndex: 'Beginner',
          text: 'Beginner',
          flex: 5
      }
           ],
           selModel: Ext.create('Ext.selection.RowModel', {
           allowDeselect: true,
           mode: 'SIMPLE',
           listeners: {
               deselect: {
                     fn: me.onRowModelDeselect,
                     scope: me
                     },
           selectionchange: {
                     fn: me.onRowModelSelectionChange,
                     scope: me
                     }
               }
         })
   }

关于javascript - 我可以在ExtJS的网格面板单元格上设置多选功能吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20613640/