DataView hides spawning ComboBox

Question

Hi all,

I posted this at the Ext forums a couple of days ago, but no response, so maybe better luck here.

I currently have a combo box loading data from php through ajax. Everything works fine except that when my results are returned, the DataView covers the ComboBox (fig 2.) I have included the relevant code below, so any help would be greatly appreciated.

I may be wrong, but I think I've eliminated CSS problems, as the DataView element is rendered with an absolute position.

fig 1.

fig 2.

var dataStore = new Ext.data.JsonStore({
    url: '/ajaxGateway.php',
    root: 'data',
    baseParams: {
        useClass: 'App_GeoIP_GeoIP',
        useMethod: 'getLocationsStartingWith'
    },
    fields: [
             {name:'text', mapping:'TITLE'},
             {name:'stateName', mapping:'STATE_NAME'},
             {name:'regionHierarchy', mapping:'REGION_HIERARCHY'},
             {name:'id', mapping:'ID', type:'int'},
             {name:'lat', mapping:'LATITUDE', type:'float'},
             {name:'lng', mapping:'LONGITUDE', type:'float'}
            ]
});

_

var resultTpl = new Ext.XTemplate(
    '<tpl for="."><div class="search-item" style="text-align:left">',
    '<span>{text}, <small>{stateName}</small></span>',
    '</div></tpl>'
);

_

var locationBasedRulesTree = new Ext.tree.TreePanel({
    title: 'Location Based Regions',
    height: 329,
    width: 480,
    autoScroll: true,
    useArrows: true,
    animate: false,
    rootVisible: false,
    frame: true,
    enableDrag: true,
    root: new Ext.tree.AsyncTreeNode({
        id:'custom_root'
    }),
    tbar: new Ext.Toolbar(),
    listeners:
    {
        listenersHandlers...: function(){}
    }
});

_

locationBasedRulesTree.getTopToolbar().addField(
    new Ext.form.ComboBox({
        store: dataStore,
        displayField: 'text',
        typeAhead: false,
        loadingText: 'Finding...',
        blankText: "Search for a Place...",
        width: (Ext.isIE6) ? 155:200,
        hideTrigger: true,
        forceSelection: true,
        selectOnFocus:true,
        tpl: resultTpl,
        itemSelector: 'div.search-item',
        enableKeyEvents: true,
        onSelect: function(record)
        {
            selectHandler...();
        },
        listeners:
        {
            keypress : function(comboBox, event) {
                keypressHandler...();
            }
        }
    })
);

Answer 1

Hard to say. The first thing I would do is rip the combo box out of your layout and try rendering it to a plain page and see if you still have this issue (should be simple to do). That will immediately confirm or rule out that it's related to your particular layout. You also did not mention whether or not this happens only in particular browser/OS combinations -- if so, it could be an Ext bug. If it happens in any browser, then it's probably an issue with your layout. Try narrowing it down first then maybe it will be more obvious where to go next.

Answer 2

It looks almost like the listAlign or hideParent are set wrong.. I'm not seeing that in your definition, but would double-check... try setting those to configuration options manually. I've also had issues with IE when not setting the listWidth config property.