PDA

View Full Version : [OPEN-1445] Arrow key row selection inside grid panel and context menu



dabird
10 Dec 2010, 12:28 PM
I've run across a situation that I need help solving. This is reproducible with the array grid on the samples page.

When you use the up/down arrow keys to select rows in the grid panel, a keyboard contextmenu event will not display the Ext context menu. From tracing it appears that event.getTarget() is returning a#id#x-grid3-focus. In the row selection code, it is trying to find the parent row for this item to fire the rowcontextmenu event, but obviously there is no row parent for this item. As a result the event isn't fired and rather, the browser's context menu is displayed. When you perform row selection with the mouse, the event's target is some cell inside the grid (e.g., td.x-grid3-col). The keyboard contextmenu event will be handled at this point and the Ext context menu will be displayed.

I need the contextmenu event handling to work for the keyboard context menu when one has used the up/down arrow keys for row selection in the grid. This is necessary for our product to meet accessibility requirements.




Here are specific steps to reproduce using FF 3.6.12 (this assumes you've already set up array-grid.js on your local machine):
Click on a row in the grid using the mouse.
Click the context menu key on your keyboard. Notice that the Ext context menu is displayed.
Click on the row to hide the menu and refocus on the row. (Using escape key to hide menu removes grid focus, so avoid it.)
Now use the up or down arrow key on your keyboard to select the previous or next row.
Click the context menu key on your keyboard. At this point you will see the browser's context menu. No Ext context menu is displayed.
Below is the code to be added to the array grid sample with two extra handlers and a menu that allows you to reproduce the problem.



//Put this code after render call in array-grid.js from the samples page
grid.on('rowcontextmenu', onRowContextMenu);
grid.on('keydown', function(e){
if (e.getKey() === e.CONTEXT_MENU) {
console.log("target="+e.getTarget());
this.onContextMenu(e);
}
});

function onRowContextMenu(grid, rowIndex, evt){
evt.preventDefault();
menu.showAt(evt.getXY());
}

/*Menu functionality taken from samples page. Note that not all functionality present,
so clicking menu items will give Javascript errors. All I care about is that the context menu displays.*/
var dateMenu = new Ext.menu.DateMenu({
handler: function(dp, date){
Ext.example.msg('Date Selected', 'You chose {0}.', date.format('M j, Y'));
}
});

var colorMenu = new Ext.menu.ColorMenu({
handler: function(cm, color){
Ext.example.msg('Color Selected', 'You chose {0}.', color);
}
});

var menu = new Ext.menu.Menu({
id: 'mainMenu',
style: {
overflow: 'visible' // For the Combo popup
},
items: [
{
text: 'I like Ext',
checked: true, // when checked has a boolean value, it is assumed to be a CheckItem
checkHandler: onItemCheck
}, '-', {
text: 'Radio Options',
menu: { // <-- submenu by nested config object
items: [
// stick any markup in a menu
'<b class="menu-title">Choose a Theme</b>',
{
text: 'Aero Glass',
checked: true,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'Vista Black',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'Gray Theme',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}, {
text: 'Default Theme',
checked: false,
group: 'theme',
checkHandler: onItemCheck
}
]
}
},{
text: 'Choose a Date',
iconCls: 'calendar',
menu: dateMenu // <-- submenu by reference
},{
text: 'Choose a Color',
menu: colorMenu // <-- submenu by reference
}
]
});

Condor
10 Dec 2010, 12:43 PM
Good find! I would consider this a bug.

Would you mind if I moved it to the Bugs section?

dabird
10 Dec 2010, 2:21 PM
Thanks, Condor. I considered this a bug too. Do you have a quick and dirty fix that I might be able to implement to get this working for now? I do not mind this being moved into the Bugs section at all.

Regards,
dabird


Good find! I would consider this a bug.

Would you mind if I moved it to the Bugs section?

jsakalos
10 Dec 2010, 4:11 PM
Moving the thread to Bugs. (I do not have context menu key on the Mac keyboard so I cannot test it myself.)