PDA

View Full Version : editor grid panel like excel



rtoepfer
26 Jan 2011, 4:46 AM
I'd like to have the editor grid panel mimic Excel's grid navigation exactly. The features I need are:

1- up,down,left,right navigation amongst cells
2- immediate ability to type/insert contents upon cell focus
3- automatic selection of cell contents upon cell focus
4- selection of multiple cells and handling wiping contents of all selected cells (a feature combination with gridpanel keys handler)


It seems the rowselectionmodel and cellselectionmodel do not support all of features 1 to 3. I've overridden the rowselectionmodel class to allow arrow key navigation.

I need the feature to select multiple cells and this should probably be a feature of cellselectionmodel. Cellselectionmodel does not support immediate editability, immediate arrow navigation if cell is in edit mode, nor selecting of multiple cells for an editorgridpanel.

Any solutions out there?

Overridden rowselectionmodel allowing arrow key navigation:



/**
* Override selection model to allow arrow key navigation
*/
Ext.override( Ext.grid.RowSelectionModel, {
onEditorKey : function(field, e) {
var k = e.getKey(),
newCell,
g = this.grid,
last = g.lastEdit,
ed = g.activeEditor,
shift = e.shiftKey,
ae, last, r, c;

if(k == e.TAB) {
e.stopEvent();
ed.completeEdit();
if(shift) {
newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
}else {
newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
}
}else if(k == e.ENTER) {
if(this.moveEditorOnEnter !== false){
if(shift) {
newCell = g.walkCells(last.row - 1, last.col, -1, this.acceptsNav, this);
}else {
newCell = g.walkCells(last.row + 1, last.col, 1, this.acceptsNav, this);
}
}
}
// RMT: add UP, DOWN, LEFT, RIGHT handlers
else if(k == e.RIGHT) {
e.stopEvent();
ed.completeEdit();
newCell = g.walkCells(ed.row, ed.col+1, 1, this.acceptsNav, this);
}
else if(k == e.LEFT) {
e.stopEvent();
ed.completeEdit();
newCell = g.walkCells(ed.row, ed.col-1, -1, this.acceptsNav, this);
}
else if(k == e.DOWN) {
e.stopEvent();
ed.completeEdit();
newCell = g.walkCells(last.row + 1, last.col, 1, this.acceptsNav, this);
}
else if(k == e.UP) {
e.stopEvent();
ed.completeEdit();
newCell = g.walkCells(last.row - 1, last.col, -1, this.acceptsNav, this);
}
// RMT: end insert

if(newCell){
r = newCell[0];
c = newCell[1];

this.onEditorSelect(r, last.row);

if(g.isEditor && g.editing){ // *** handle tabbing while editorgrid is in edit mode
ae = g.activeEditor;
if(ae && ae.field.triggerBlur){
// *** if activeEditor is a TriggerField, explicitly call its triggerBlur() method
ae.field.triggerBlur();
}
}
g.startEditing(r, c);
}
}
});