Results 1 to 4 of 4

Thread: Ext Form as part of panel menu (tabbing/form controls)

  1. #1
    Ext JS Premium Member
    Join Date
    Mar 2009
    Posts
    24

    Default Ext Form as part of panel menu (tabbing/form controls)

    We're using something very similar to Form 2 on the examples page:
    http://www.extjs.com/deploy/dev/exam...m/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:


    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.

  2. #2
    Sencha User MD's Avatar
    Join Date
    Mar 2007
    Posts
    178

    Default

    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.

  3. #3
    Sencha User MD's Avatar
    Join Date
    Mar 2007
    Posts
    178

    Default

    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:

    Code:
    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
    			});
    		}
    	}
    });

  4. #4
    Sencha User mysticav's Avatar
    Join Date
    Mar 2007
    Location
    Mexico
    Posts
    518

    Default

    On Ext 4, there is a built-in config option for this:
    Code:
    enableKeyNav: false

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •