PDA

View Full Version : Locked Grid - Tab between Locked & Normal View in the Same Row



dd_polla
24 Nov 2014, 11:49 AM
Hello,

Ext 4.2.1. I have a locked grid with editable columns in the locked and normal views and the grid uses the cell selection model. The locked view has 3 editable columns. If I click a grid cell in column 3 row 1 (locked view) is it possible to have TAB keyboard navigation move to column 4 in row 1 (tab into the normal view) - instead of wrapping to column 1 row 2 in the locked view?

thanks in advance, dean.

slemmon
24 Nov 2014, 12:59 PM
Hi,

The framework doesn't offer a way from the API to direct the tab direction out of the sub-grid and into its peer grid when locked. You would need to extend / override the tab key nav handling in the celleditor plugin.

dd_polla
26 Nov 2014, 9:53 AM
Thanks for confirming that the framework does not support this. Below is my solution, not the most elegant, but it seems to work.




clazz = Ext.ClassManager.get('Ext.selection.CellModel');
Ext.override(clazz, {
move: function(dir, e) {
var me = this;


// normal grid (not locked)
if (!me.view.lockingPartner) {
me.callParent(arguments);


// handle TAB direction between locked view and normal view
} else {
var pos = me.getCurrentPosition();


if (pos) {
// calculate the new row and column position
var newPos = pos.view.walkCells(pos, dir, e, me.preventWrap),
viewIsLocked = pos.view.ownerCt.isLocked,
targetPos,
columns;


// the new position exists
if (newPos && newPos.view) {
viewIsLocked = newPos.view.ownerCt.isLocked;

// tab right from locked view to normal view in the same row
if (dir === 'right' && pos.row !== newPos.row && viewIsLocked) {
newPos.row = pos.row;
newPos.column = 0;
newPos.switchViews = true;


// tab right from normal view to locked view wrapping to the start of the next row
} else if (dir === 'right' && pos.row !== newPos.row && !viewIsLocked) {
newPos.column = 0;
newPos.switchViews = true;


// tab left from normal view to locked view in the same row
} else if (dir === 'left' && pos.row !== newPos.row && !viewIsLocked) {
newPos.row = pos.row;
columns = newPos.view.lockingPartner.getGridColumns();
newPos.column = columns.length - 1;
newPos.switchViews = true;

// tab left from locked view to normal view wrapping to the end of the previous row
} else if (dir === 'left' && pos.row !== newPos.row && viewIsLocked) {
columns = newPos.view.lockingPartner.getGridColumns();
newPos.column = columns.length - 1;
newPos.switchViews = true;
}


if (newPos.switchViews) {
targetPos = newPos;
targetPos.view = newPos.view.lockingPartner;
} else {
newPos.view = pos.view;
return me.setCurrentPosition(newPos);
}


// the new position does not exist, attempting to move past grid view boundary
} else {
// end of locked view, tab right to normal view in same row
if (dir === 'right' && viewIsLocked) {
targetPos = pos;
targetPos.column = 0;
targetPos.view = pos.view.lockingPartner;


// end of normal view, wrap to start of locked view
} else if (dir === 'right' && !viewIsLocked) {
targetPos = pos;
targetPos.row = 0;
targetPos.column = 0;
targetPos.view = pos.view.lockingPartner;


// start of normal view, tab left to locked grid in the same row
} else if (dir === 'left' && !viewIsLocked) {
targetPos = pos;
columns = pos.view.lockingPartner.getGridColumns();
targetPos.column = columns.length - 1;
targetPos.view = pos.view.lockingPartner;
}
}

// position to move to
if (targetPos) {
// cellmousedown and select needed when moving from editable cell to uneditable cell
targetPos.view.fireEvent('cellmousedown', targetPos.view, targetPos.row, targetPos.column);
targetPos.view.selModel.select(targetPos);
targetPos.view.editingPlugin.startEditByPosition({row: targetPos.row, column: targetPos.column});
targetPos.view.selModel.wasEditing = true;
}
}
}
}
});