DataView隐藏产生ComboBox

时间:2010-02-16 04:04:33

标签: javascript user-interface extjs

我几天前在Ext论坛上发布了这个,但没有回复,所以也许在这里好运。

我目前有一个组合框从php通过ajax加载数据。一切正常,但是当我的结果被返回时,DataView覆盖了ComboBox(图2)。我已经在下面列出了相关代码,所以任何帮助都将不胜感激。

我可能错了,但我认为我已经消除了CSS问题,因为DataView元素以绝对位置呈现。

alt text http://img.skitch.com/20100216-8t4pmbc3e6mydqqrac9qm9ucj.jpg

图1。

alt text http://img.skitch.com/20100216-n5t44g8rua7fawkwjrj49fk7t4.jpg

图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...();
            }
        }
    })
);

2 个答案:

答案 0 :(得分:0)

很难说。我要做的第一件事是从你的布局中撕掉组合框并尝试将它渲染到一个普通页面,看看你是否还有这个问题(应该很简单)。这将立即确认或排除它与您的特定布局相关。你也没有提到这是否仅在特定的浏览器/操作系统组合中发生 - 如果是这样,它可能是一个Ext bug。如果它发生在任何浏览器中,那么它可能是您的布局问题。尝试先缩小它然后可能会更明显下一步去哪里。

答案 1 :(得分:0)

看起来几乎像listAlign或hideParent设置错误..我没有在你的定义中看到它,但会仔细检查...尝试手动设置配置选项。当我没有设置listWidth配置属性时,我也遇到了IE的问题。