[2.0/2.1] Comboboxes in sequence render list item select to wrong input field

**surfyogi** · 23 Apr 2008 3:51 PM

If I have two combo boxes in a row in the tab order, and I quickly tab from one to the next, after entering some chars. The list of matching items for the first combo appears attached to the second combo (where focus is now), and if I pick a value it goes into the second box (not the first combo, which initiated the combo list popup).

I'd like:
to see the first box not show a list if it loses focus, and have the second box wait for input.

Seems to be a bug in 2.1 (I tested it today) and it seems to be both IE and FF.

I assume I can't configure this with default config params, but have tried a few things, read the docs and forum posts; nothing is working thus far.

I'm prepared to extend and customize combobox if necessary to work around this, but could use some help thinking thru which method(s) to touch. And it seems like this was never found in testing; looks like it only happens first time (push focus back to first combo and type in chars again; now it's not an issue).

see attached pic of problem..
notice, the combo list comes up and is attached to the second combo box, but was initiated by the first combo box.

is this a bug?
Any ideas on how to work around it for now?

Here is a code example that works for testing, but needs a data source:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0055)http://extjs.com/deploy/dev/examples/form/xml-form.html -->
<HTML><HEAD><TITLE>XML Form</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<LINK href="../ext-2.1/resources/css/ext-all.css" type=text/css rel=stylesheet>
<LINK href="../ext-2.1/resources/css/xtheme-grey.css" type=text/css rel=stylesheet>
<SCRIPT src="../ext-2.1/adapter/ext/ext-base.js" type=text/javascript></SCRIPT>
<SCRIPT src="../ext-2.1/ext-all.js" type=text/javascript></SCRIPT>
<META content="MSHTML 6.00.6000.16608" name=GENERATOR>
</HEAD>

<BODY>
<script>

//Ext.BLANK_IMAGE_URL = '../ext-2.1/resources/images/default/s.gif';

Ext.onReady(function(){

    var ds = new Ext.data.Store({                    // data store for airport combobox autocomplete data feed (HttpProxy)
        proxy: new Ext.data.HttpProxy(
        new Ext.data.Connection({

        url: '/dyna/autocomplete?action=complete', method: 'post'}
        )),

        reader: new Ext.data.XmlReader({
            record: 'ai',
            id: 'c'
        }, [
            {name: 'airportcode', mapping: 'c'},
            {name: 'airportname', mapping: 'dn'}
        ])
    });

    // Custom rendering Template for airport combobox dropdown list
    var resultTpl = new Ext.XTemplate(
        '<tpl for="."><div class="search-item">',
            //'<h3><span>{airportcode}<br /></span>{airportname}</h3>',
            '<bold>{airportname}</bold>',
        '</div></tpl>'
    );

    var air_form = new Ext.FormPanel( {

                        id:'air_rt_form',
                        labelAlign: 'top',
                        frame:true,
                        //bodyStyle:'padding:2px 2px 0',
                        width: 250,
                        hideMode:'display',
                        //plugins: [new Ext.ux.OOSubmit()],            // value based submit plugin - see OOSubmit.js above
                        standardSubmit:true,
                        url:'http://mhiremani.cfares.local/advancedsearch.cfr',
                        
                        items: [{
                                columnWidth:1,
                                layout: 'form',
                                items: [{                            //rt_from
                                    xtype:'combo',
                                    fieldLabel: 'From',
                                    name:'rt_from',
                                    id:'rt_from',
                                    store: ds,
                                    queryParam:'id',
                                    displayField:'airportname',
                                    typeAhead: false,
                                    loadingText: 'Searching...',
                                    minListWidth: 380,
                                    minChars: 2,
                                    hideTrigger:true,
                                    tpl: resultTpl,
                                    //applyTo: 'rt_from_id',
                                    itemSelector: 'div.search-item',
                                    tabIndex:4,
                                    width:230
                                }, {                                //rt_to
                                    xtype:'combo',
                                    fieldLabel: 'To',
                                    name:'rt_to',
                                    id:'rt_to',
                                    store: ds,
                                    queryParam:'id',
                                    displayField:'airportname',
                                    typeAhead: false,
                                    loadingText: 'Searching...',
                                    minListWidth: 380,
                                    minChars: 2,
                                    hideTrigger:true,
                                    tpl: resultTpl,
                                    //applyTo: 'rt_to_id',
                                    itemSelector: 'div.search-item',
                                    tabIndex:5,
                                    width:230
                                }]
                            }]
                     });
    
    air_form.render(document.body);

});   // end onReady
</script>
</BODY></HTML>

If this is hooked up to the states.js file, it will work to test the bug.

[2.0/2.1] Comboboxes in sequence render list item select to wrong input field

Thread Tools

Search Thread

Display

Hybrid View

[2.0/2.1] Comboboxes in sequence render list item select to wrong input field

[2.0/2.1] Comboboxes in sequence render list item select to wrong input field