我正在尝试使用spreadsheet model选择多个单元格，但看起来没有一种方法可以选择单个单元格或一组不是范围的单元格。 （我也试过了cellmodel，但看起来它看起来也不行。）我知道selectCells存在，但就像我说的那样，我可能会选择一堆不在范围内的单元格。这是一个例子（和Fiddle）：
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);
}
});
我想要发生的是，当我选择第一个黄色单元格时，它会选择另一个黄色单元格，如果我选择一个黑色单元格，它会选择其他黑色单元格。在我的代码中，我有一个数组数组，其中包含相同颜色的每个单元格的rowIdx和colIdx，但我不知道如何使用这些信息，因为没有可用的方法。
我已经开始在代码中挖掘它们以了解它们如何进行范围选择，但它看起来像是Row和Cell选择的组合。即使我根据API将模式设置为multi，它也看起来我不能使用“ctrl”来选择多个单元格：
“MULTI” - 允许使用Ctrl和Shift键复杂选择多个项目。
有没有人对如何开始这个有任何想法或指导？
答案 0 :(得分：0)
我能够解决这个问题并使用cellmodel！它仍然是一个非常hacky的解决方案，感觉不对，因为我正在设置我自己的选择/使用处理程序和私有方法，但就像我说的那样，它有效。这是代码（和Fiddle）：
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);
}
});