I'm trying to select multiple cells using the spreadsheet model, but it doesn't look like there's a method to select an individual cell or bunch of cells that aren't a range. (I also tried the cellmodel, but that doesn't look like it works either.) I know selectCells exists, but like I said, I could potentially be selecting a bunch of cells that aren't in a range. Here's an example (and 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);
}
});
What I would like to happen is, when I select the first yellow cell, it selects the other yellow cell, and if I select a black cell, it selects the other black cells. In my code, I've got an array of arrays that contains the rowIdx and colIdx for each cell of the same color, but I have no idea how I can use this information, as there's no method available.
I've started digging around in the code to find out how they do the range selection, but it looks like it's a combination of Row and Cell selections that happen. It also doesn't look like I can use "ctrl" to select multiple cells, even if I do set the mode to multi... according to the API:
"MULTI" - Allows complex selection of multiple items using Ctrl and Shift keys.
Does anyone have any thoughts or guidance on how to get this started?
