PDA

View Full Version : Ext Form as part of panel menu (tabbing/form controls)



yankee_gal
20 Jan 2010, 9:34 AM
We're using something very similar to Form 2 on the examples page:
http://www.extjs.com/deploy/dev/examples/form/dynamic.html

Except our difference is we're making it part of a menu panel. So the menu drops down and the user can enter in their information. Outside the menu, as in the example page, a user can tab through the form just fine (without having to define tabindex, etc). However once making it part of the menu panel, it stops working. Users can't user the tabbing or arrows for radio buttons, text inputs, etc even if tab indexes are defined. . . Basically rendering it useless for keyboard users. I've done some searching on the forums with tabindex issues, but this seems to go deeper since the form works just fine outside the menu.

I'm copying 'simplified' code below, but this does demonstrate what I'm doing and how tabbing doesn't work on even this small an ext form.

Here is the code:



Ext.onReady(function() {

Ext.QuickTips.init();

var myAdvancedForm = new Ext.FormPanel({
labelAlign: 'left',
frame: true,
hideOnClick: false,
id: 'my_advanced_form',
title:'My Advanced Form',
bodyStyle: 'padding: 5px 5px 0px',
width:450,
height: 300,
autoScroll:true,
items:[]
});

var titleFrm = {
columnWidth: 1,
layout: 'form',
xtype: 'fieldset',
checkboxToggle: {
tag:'input',
type:'checkbox',
name:'user_info',
id: 'user_info'
},
title: '<label for="user_info">User Information</label>',
border: false,
autoHeight: true,
collapsed: false,
defaultType: 'textField',
labelWidth: 130,
style: {
padding: '8px 8px'
},
items: [{
xtype: 'textfield',
fieldLabel:'First Name',
name:'firstName',
anchor:'95%',
value: ' '
}, {
xtype: 'textfield',
fieldLabel:'Last Name',
name:'lastName',
anchor:'95%',
value: ' '
},{
xtype: 'textfield',
fieldLabel:'City',
name:'city',
anchor:'95%',
value: ' '
},{
xtype: 'textfield',
fieldLabel:'State'
name:'state',
anchor:'95%',
value: ' '
}, {
xtype: 'textfield',
fieldLabel:'Zip Code',
name:'zip',
anchor:'95%',
value: ' '
}, {
xtype: 'textfield',
fieldLabel:'County',
name:'county',
anchor:'95%',
value: ' '
}]
};

myAdvancedForm.add([titleFrm]);

var myMenu = new Ext.men.Menu({
id: 'myOwnMenu',
hideOnClick: false,
ignoreParentClicks: true,
items: [myAdvancedForm]
});

var tb = new Ext.Toolbar ({
id: 'myTb',
height: 27,
items: [{
id: 'myMenu',
text: 'User Form',
hideOnClick: false,
menu: myMenu,
allowOtherMenus: true,
handler: function() {
myAdvancedForm.show();
}
}]
});

var tbPanel = new Ext.Panel ({
region: 'center',
height: 27,
items: [tb]
});

var divTag = Ext.get('white');

var mainPanel = new Ext.Panel({
layout:'border',
applyTo: divTag,
width: 980,
height: 710,
items:[tbPanel]
});

mainPanel.show();
})
Sorry I don't currently have a screenshot or link at this time. But it seems like making the form part of the menu throws off the tab indexes and form controls. It clearly shows the cursor in the first text box, but hitting tab or arrows have no effect on any of the form elements.

MD
8 Apr 2010, 12:41 AM
Darn, no takers on this one yet :( I've just encountered the exact same issue, having added a formpanel in the menu of a toolbar button. I tried it in 3.1.1 and 3.2.0.

Just as you described, I too am unable to tab through the form's inputs, regardless of specifically defining tabIndex or not. The same form fields placed as toolbar items outside the menu work perfectly fine.

In addition to the tabbing not working, I also noticed that you cannot left/right arrow through text entered in a textfield, nor shift-left/right arrow to select the text.

Definitely seems like something's amiss, and this is a bit of a let-down as there's a multitude of scenarios where forms in menus would be useful. :(

MD
8 Apr 2010, 2:54 AM
Ok, sorted it out. By default, Ext.menu.Menu initializes an instance of Ext.menu.MenuNav which restricts tabbing and certain other keystroke events in a menu. Adding in the following override and setting a containsForm: true param in your menu config will allow forms in that menu to function normally:


Ext.override(Ext.menu.Menu, {
containsForm: false,
onRender : function(ct, position){
if(!ct){
ct = Ext.getBody();
}

var dh = {
id: this.getId(),
cls: 'x-menu ' + ((this.floating) ? 'x-menu-floating x-layer ' : '') + (this.cls || '') + (this.plain ? ' x-menu-plain' : '') + (this.showSeparator ? '' : ' x-menu-nosep'),
style: this.style,
cn: [
{tag: 'a', cls: 'x-menu-focus', href: '#', onclick: 'return false;', tabIndex: '-1'},
{tag: 'ul', cls: 'x-menu-list'}
]
};
if(this.floating){
this.el = new Ext.Layer({
shadow: this.shadow,
dh: dh,
constrain: false,
parentEl: ct,
zindex: this.zIndex
});
}else{
this.el = ct.createChild(dh);
}
Ext.menu.Menu.superclass.onRender.call(this, ct, position);

if(!this.keyNav && !this.containsForm){
this.keyNav = new Ext.menu.MenuNav(this);
}
// generic focus element
this.focusEl = this.el.child('a.x-menu-focus');
this.ul = this.el.child('ul.x-menu-list');
this.mon(this.ul, {
scope: this,
click: this.onClick,
mouseover: this.onMouseOver,
mouseout: this.onMouseOut
});
if(this.enableScrolling){
this.mon(this.el, {
scope: this,
delegate: '.x-menu-scroller',
click: this.onScroll,
mouseover: this.deactivateActive
});
}
}
});

mysticav
20 Mar 2014, 5:15 PM
On Ext 4, there is a built-in config option for this:

enableKeyNav: false