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

Question

Can I set multi-on-select on grid panel cells?

Hey guys, I'm fairly new to ExtJS and I was wondering if there is a way to multi-on-select grid CELLS or give the illusion of multi-on-select. By "illusion" I mean to change the CSS of the individual cell dynamically on click so that it looks like it has remained toggled.

The following is code to my Grid window Code:

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 ();

And then

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));
    }

Answer 1

I realized an alternate way of solving this;

Instead of applying a cell selector which doesnt allow mode: 'MULTI' , divide each of the columns into individual tables and apply a row selector or check box selector to them and set that to MULTI. Works like a charm.

As a reference for others with the same problem, it now successfully looks like this

The code of the Beginner, Intermediate and Advanced columns was replace by individual tables with a row selector function as follows

{
 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
                     }
               }
         })
   }