ExtJS 5.1：选择多个非相邻网格单元

我尝试使用选择多个单元格，但似乎没有一种方法可以选择不在范围内的单个单元格或一组单元格。（我也试过cellmodel，但它看起来也不起作用。）我知道存在，但正如我所说，我可能会选择一堆不在范围内的细胞。下面是一个例子（和）：

Ext.application({
名字：“小提琴”，
启动：函数（）{
var store=Ext.create（'Ext.data.store'{
字段：[“时间”、“天数”]，
代理：{
键入：“内存”
},
数据：[{
时间:800,，
天数：[{
日期：'星期一'，
姓名ID:1，
姓名：“穆德”
}, {
日期：'星期二'，
姓名ID:1，
姓名：“穆德”
}, {
日:"星期三",，
姓名ID:2，
名字：“史高丽”
}, {
日期：星期四
}, {
日期：'星期五'，
姓名ID:2，
名字：“史高丽”
}, {
日期：'星期六'，
姓名ID:3，
名字：“斯金纳”
}, {
日:"星期日",，
姓名ID:2，
名字：“史高丽”
}]
}]
});
var renderFn=函数（值、元数据、记录、rowIdx、colIdx、存储、视图）{
var days=record.get（'days'）；
如果（天）{
var列=天[colIdx-2]；
if（column&&column.nameId！==未定义）{
metaData.tdCls='my attr-'+（column.nameId%10）；
}
}
返回；
};
var onSelectionChange=功能（网格、选择、eOpts）{
var store=grid.getStore（）；
if（selection&&selection.startCell）{
var colIdx=selection.startCell.colIdx；
var days=selection.startCell.record.get（'days'）；
如果（天数和存储时间）{
var日=天[colIdx-2]；
var selectionModel=this.getSelectionModel（）；
如果（日期和选择型号）{
nameId=day.nameId；
如果（nameId！==未定义）{
var项目=[]；
store.each（函数（rec，rowIdx）{
var recDays=rec.get（'days'）；
如果（天）{
对于（变量i=0；i

我希望发生的是，当我选择第一个黄色单元格时，它会选择另一个黄色单元格，如果我选择一个黑色单元格，它会选择其他黑色单元格。在我的代码中，我有一个数组，其中包含相同颜色的每个单元格的rowIdx和colIdx，但我不知道如何使用这些信息，因为没有可用的方法

我已经开始在代码中寻找它们是如何进行范围选择的，但看起来这是行和单元格选择的组合。看起来我也不能用“ctrl”来选择多个单元格，即使我将模式设置为。。。根据API：

“多”-允许使用Ctrl和Shift键复杂选择多个项目

---

有人对如何开始这项工作有什么想法或指导吗？

我也能解决这个问题，并使用cellmodel！这仍然是一个非常粗糙的解决方案，感觉不太对劲，因为我正在设置自己的选择/使用处理程序和私有方法，但正如我所说的，它是有效的。以下是代码（和）：

Ext.application({
名字：“小提琴”，
启动：函数（）{
var store=Ext.create（'Ext.data.store'{
字段：[“时间”、“天数”]，
赞成的意见
Ext.application({
  name: 'Fiddle',

  launch: function() {
    var store = Ext.create('Ext.data.Store', {
      fields: ['time', 'days'],
      proxy: {
        type: 'memory'
      },
      data: [{
        time: 800,
        days: [{
          day: 'Monday',
          nameId: 1,
          name: 'Mulder'
        }, {
          day: 'Tuesday',
          nameId: 1,
          name: 'Mulder'
        }, {
          day: 'Wednesday',
          nameId: 2,
          name: 'Scully'
        }, {
          day: 'Thursday'
        }, {
          day: 'Friday',
          nameId: 2,
          name: 'Scully'
        }, {
          day: 'Saturday',
          nameId: 3,
          name: 'Skinner'
        }, {
          day: 'Sunday',
          nameId: 2,
          name: 'Scully'
        }]
      }]
    });
    var renderFn = function(value, metaData, record, rowIdx, colIdx, store, view) {
      var days = record.get('days');
      if (days) {
        var column = days[colIdx - 2];
        if (column && column.nameId !== undefined) {
          metaData.tdCls = 'my-attr-' + (column.nameId % 10);
        }
      }
      return;
    };
    var onSelectionChange = function(grid, selection, eOpts) {
      var store = grid.getStore();
      if (selection && selection.startCell) {
        var colIdx = selection.startCell.colIdx;
        var days = selection.startCell.record.get('days');
        if (days && store) {
          var day = days[colIdx - 2];
          var selectionModel = this.getSelectionModel();
          if (day && selectionModel) {
            nameId = day.nameId;
            if (nameId !== undefined) {
              var items = [];
              store.each(function(rec, rowIdx) {
                var recDays = rec.get('days');
                if (recDays) {
                  for (var i = 0; i < recDays.length; i++) {
                    var rec = recDays[i];
                    if (rec && rec.nameId === nameId) {
                      items.push([rowIdx, i + 2]);
                    }
                  }
                }
              }, this);
              console.log(items);
              //                            selectionModel.select(items);
            }
          }
        }
      }
    };
    /*var onSelectionChangeGrid = function(selModel, record, rowIdx, colIdx, eOpts) {
        var days = record.get('days');
        var store = this.getStore();
        console.log(days, store);
        if (days && store) {
            var day = days[colIdx - 2];
            var selectionModel = this.getSelectionModel();
            if (day && selectionModel) {
                nameId = day.nameId;
                if (nameId !== undefined) {
                    var items = [];
                    store.each(function(rec) {
                        var recDays = rec.get('days');
                        if (recDays) {
                            for (var i = 0; i < recDays.length; i++) {
                                var rec = recDays[i];
                                if (rec && rec.nameId === nameId) {
                                    items.push(rec);
                                }
                            }
                        }
                    }, this);
                    console.log(items);
                    selectionModel.select(items);
                }
            }
        }
    };*/
    var grid = Ext.create('Ext.grid.Panel', {
      store: store,
      forceFit: true,
      selModel: {
        selType: 'spreadsheet',
        mode: 'multi'
      },
      columns: [{
        text: 'Time',
        dataIndex: 'time'
      }, {
        text: 'Monday',
        dataIndex: 'days',
        renderer: renderFn
      }, {
        text: 'Tuesday',
        dataIndex: 'days',
        renderer: renderFn
      }, {
        text: 'Wednesday',
        dataIndex: 'days',
        renderer: renderFn
      }, {
        text: 'Thursday',
        dataIndex: 'days',
        renderer: renderFn
      }, {
        text: 'Friday',
        dataIndex: 'days',
        renderer: renderFn
      }, {
        text: 'Saturday',
        dataIndex: 'days',
        renderer: renderFn
      }, {
        text: 'Sunday',
        dataIndex: 'days',
        renderer: renderFn
      }],
      renderTo: Ext.getBody()
    });
    grid.on('selectionchange', onSelectionChange, grid);
  }
});

Ext.application({
  name: 'Fiddle',

  launch: function() {
    var store = Ext.create('Ext.data.Store', {
      fields: ['time', 'days'],
      proxy: {
        type: 'memory'
      },
      data: [{
        time: 800,
        days: [{
          day: 'Monday',
          nameId: 1,
          name: 'Mulder'
        }, {
          day: 'Tuesday',
          nameId: 1,
          name: 'Mulder'
        }, {
          day: 'Wednesday',
          nameId: 2,
          name: 'Scully'
        }, {
          day: 'Thursday'
        }, {
          day: 'Friday',
          nameId: 2,
          name: 'Scully'
        }, {
          day: 'Saturday',
          nameId: 3,
          name: 'Skinner'
        }, {
          day: 'Sunday',
          nameId: 2,
          name: 'Scully'
        }]
      }, {
        time: 830,
        days: [{
          day: 'Monday',
          nameId: 1,
          name: 'Mulder'
        }, {
          day: 'Tuesday',
          nameId: 1,
          name: 'Mulder'
        }, {
          day: 'Wednesday',
          nameId: 2,
          name: 'Scully'
        }, {
          day: 'Thursday'
        }, {
          day: 'Friday',
          nameId: 2,
          name: 'Scully'
        }, {
          day: 'Saturday',
          nameId: 3,
          name: 'Skinner'
        }, {
          day: 'Sunday',
          nameId: 2,
          name: 'Scully'
        }]
      }, {
        time: 900,
        days: [{
          day: 'Monday'
        }, {
          day: 'Tuesday'
        }, {
          day: 'Wednesday',
          nameId: 1,
          name: 'Mulder'
        }, {
          day: 'Thursday',
          nameId: 2,
          name: 'Scully'
        }, {
          day: 'Friday',
          nameId: 4,
          name: 'Lone Gunmen'
        }, {
          day: 'Saturday'
        }, {
          day: 'Sunday'
        }]
      }, {
        time: 930,
        days: [{
          day: 'Monday'
        }, {
          day: 'Tuesday'
        }, {
          day: 'Wednesday',
          nameId: 5,
          name: 'Smoking Man'
        }, {
          day: 'Thursday',
          nameId: 5,
          name: 'Smoking Man'
        }, {
          day: 'Friday'
        }, {
          day: 'Saturday',
          nameId: 4,
          name: 'Lone Gunmen'
        }, {
          day: 'Sunday'
        }]
      }]
    });
    var renderFn = function(value, metaData, record, rowIdx, colIdx, store, view) {
      var days = record.get('days');
      if (days) {
        var column = days[colIdx - 1];
        if (column && column.nameId !== undefined) {
          metaData.tdCls = 'my-attr-' + (column.nameId % 10);
        }
      }
      return;
    };
    var onSelectionChange = function(selectionModel, record, rowIdx, colIdx, eOpts) {
      var store = this.getStore();
      console.log('here', record);
      if (record) {
        var view = this.view;
        var days = record.get('days');
        if (view && days && store) {
          var cell = Ext.create('Ext.grid.CellContext', view);
          // Subtract 1 because we have to compensate for the time column
          var day = days[colIdx - 1];
          if (day && selectionModel && cell) {
            grid.deselectCells();
            var nameId = day.nameId;
            if (nameId !== undefined) {
              var items = [];
              store.each(function(rec, rowIdx) {
                var recDays = rec.get('days');
                if (recDays) {
                  for (var i = 0; i < recDays.length; i++) {
                    var rec = recDays[i];
                    if (rec && rec.nameId === nameId) {
                      grid.selectedCells.push([rowIdx, i + 1]);
                      cell.setPosition(rowIdx, i + 1);
                      view.onCellSelect(cell);
                    }
                  }
                }
              }, this);
            }
          }
        }
      }
    };
    var grid = Ext.create('Ext.grid.Panel', {
      store: store,
      forceFit: true,
      selModel: {
        selType: 'cellmodel'
      },
      viewConfig: {
        columnLines: false
      },
      selectedCells: [],
      columns: [{
        text: 'Time',
        dataIndex: 'time'
      }, {
        text: 'Monday',
        dataIndex: 'days',
        renderer: renderFn
      }, {
        text: 'Tuesday',
        dataIndex: 'days',
        renderer: renderFn
      }, {
        text: 'Wednesday',
        dataIndex: 'days',
        renderer: renderFn
      }, {
        text: 'Thursday',
        dataIndex: 'days',
        renderer: renderFn
      }, {
        text: 'Friday',
        dataIndex: 'days',
        renderer: renderFn
      }, {
        text: 'Saturday',
        dataIndex: 'days',
        renderer: renderFn
      }, {
        text: 'Sunday',
        dataIndex: 'days',
        renderer: renderFn
      }],
      deselectCells: function() {
        var grid = this;
        var selectedCells = this.getSelectedCells();
        if (grid && selectedCells && selectedCells.length) {
          var view = grid.view;
          var cell = Ext.create('Ext.grid.CellContext', view);
          for (var i = 0; i < selectedCells.length; i++) {
            var selection = selectedCells[i];
            if (selection) {
              cell.setPosition({
                row: selection[0],
                column: selection[1]
              });
              view.onCellDeselect(cell);
            }
          }
        }
        this.selectedCells = [];
      },
      getSelectedCells: function() {
        var selectedCells = this.selectedCells;
        return selectedCells;
      },
      renderTo: Ext.getBody()
    });
    grid.on('select', onSelectionChange, grid);
  }
});