View Full Version : A wierd textfield bug. (Probably DOM related, not ExtJS?)

2 Jun 2011, 4:15 AM
Hello everyone,

I am facing a rather unpleasant bug. I have this interface:
(It is a toolbar). Ignore the names, buttons etc.
The Problem: The textfields in this menu item cannot be traversed with arrow keys. That is, while typing text, you cannot go neither back nor forward with the left and right arrow keys.
Anyone experienced this before ?

2 Jun 2011, 8:48 AM
The Tab/Shift+Tab key is typically used to traverse fields in web applications.

2 Jun 2011, 12:06 PM
If you mean that WITHIN the textfield itself you can't scroll left or right, then its probably a validation issue where the key presses are being consumed or erroring out.

Please post your code so we can help.

2 Jun 2011, 11:42 PM
Your interpretation of my issue is correct: the left-right buttons do not work within a text field.

Here is the code:

if(fields.length > 0) {
var searchPanel = new Ext.Panel({
layout: 'form',
itemId: 'searchpanel',
frame: true
for(var i in fields) {
//Add textfield-checkbox pairs...
if(typeof fields === 'object') {
xtype: 'compositefield',
itemId: fields[i].NOME.toUpperCase(),
items: [{
fieldLabel: fields[i].CAPTION,
xtype: 'textfield',
itemId: 'searchtext'
xtype: 'checkbox',
itemId: 'searchcheck'
//Add bottom buttons...
this.add({ //[I]this is a toolbar, in this context.
xtype: 'button',
text: 'Cerca',
menu: {
xtype: 'menu',
style: 'padding: 0 0 0 5px;',
width: 300,
items: [searchPanel]

6 Jun 2011, 4:51 AM
Bump. (Are bumps legal on this forum, btw?) . Anyway, i haven't found a solution to the problem.

6 Jun 2011, 5:35 AM
Yeah, I'm having the same issue, worked on it a bit Friday, gonna try to tackle it again today.

6 Jun 2011, 8:01 PM
Looks like a bug to me, I'd advise you report it to the bug forum. Simpler test case:

new Ext.menu.Menu({
items: [{
xtype: 'textfield'
}).showAt([20, 20]);

The problem is in Ext.menu.MenuNav, which intercepts all keystrokes to allow for keyboard navigation of the menu. There is some code in there to treat fields differently but it appears to be incorrect.

I used this patch to workaround the issue:

(function() {
var doRelay = Ext.menu.MenuNav.prototype.doRelay;

Ext.override(Ext.menu.MenuNav, {
doRelay: function(e, h) {
if (this.menu.activeItem && this.menu.activeItem.isFormField && e.getKey() != e.TAB) {
return true;

return doRelay.apply(this, arguments);

If you compare this to MenuNav you'll find that effectively I've just switched false for true. Quite what the original developer was trying to achieve I'm not entirely sure but I suspect there's something more subtle going on then just getting a boolean back to front.

7 Jun 2011, 6:10 AM
So is there a way to override the menunav on an EditorGridPanel?

You may have already answered this question, but I'm kinda slow sometimes ...