Extjs 4自定义组合框布局错误

Question

我正在尝试将组合框的选择器自定义为gridpanel。 我有一个我无法解决的UI错误。当我将组合器放在fieldcontainer中并使用hbox的布局并尝试搜索时，选择器会弹出更高的应该是。

如果我第二次搜索 - 它奇迹般地弹出正确的位置。之后，每次都是正确的。

问题是什么以及可以采取哪些措施来解决问题？

这是组合定义

Ext.define('NG.ux.form.field.GridComboBox', {
    extend: 'Ext.form.field.ComboBox',
    alias: 'widget.gridcombobox',
    minChars: 3,
    fieldLabel: 'Choose Search',
    displayField: 'name',
    valueField: 'id',
    typeAhead: false,
    anchor: '100%',
    pageSize: 10,
    autoSelect: false,
    // copied from ComboBox 
    createPicker: function () {
        var me = this,
            picker,
            pickerCfg = Ext.apply({
                xtype: 'gridpanel',
                pickerField: me,
                selModel: {
                    mode: me.multiSelect ? 'SIMPLE' : 'SINGLE'
                },
                floating: true,
                hidden: true,
                ownerCt: me,
                store: me.store,
                displayField: me.displayField,
                focusOnToFront: false,
                tpl: me.tpl

            }, me.listConfig, me.defaultListConfig);

        picker = me.picker = Ext.widget(pickerCfg);

        me.mon(picker, {
            itemclick: me.onItemClick,
            refresh: me.onListRefresh,
            scope: me
        });

        me.mon(picker.getSelectionModel(), {
            beforeselect: me.onBeforeSelect,
            beforedeselect: me.onBeforeDeselect,
            selectionchange: me.onListSelectionChange,
            scope: me
        });
        return picker;
    },


    listConfig: {
        loadingText: 'Searching...',
        emptyText: 'No matching posts found.',
        hideHeaders: true,
        features: [
        {
            ftype: 'grouping',
            groupHeaderTpl: '{name}',
            collapsible: false
        }],
        height: 100,
        columns: [
            {
                header: 'Name',
                dataIndex: 'name',
                flex: 1
            }
       ]
    },

    initComponent: function () {

        this.callParent(arguments);
    }
});

这是一个布局定义

var states = Ext.create('Ext.data.Store', {
    fields: ['id', 'name', 'category'],
    data: [
        { "id": "AL", "name": "Alabama","category":"1" },
        { "id": "AK", "name": "Alaska", "category": "2" },
        { "id": "AZ", "name": "Arizona", "category": "2" }

    ]
});

Ext.define('NG.view.search.GeneralSearch', {
    extend: 'Ext.form.Panel',
    alias: 'widget.generalsearch',      
    store: states,
    requires: [
        'NG.ux.form.field.GridComboBox'
    ],
    title: 'Search',        
    initComponent: function () {
        this.createItems();

        this.callParent(arguments);
    },

    createItems: function () {
        this.items = [{
            xtype: 'fieldcontainer',
            layout: 'hbox',
            items: [{
                xtype: 'gridcombobox',                    
                store: states,
                hideTrigger: true,
                hideLabel: true,
                listeners: {
                    scope: this,
                    select: function (arg1, arg2, arg3) {
                        this.fireEvent('select', arg1, arg2, arg3);
                    }
                }
            }, {
                xtype: 'button',
                text: 'one',
                scale: 'small'
            }, {
                xtype: 'button',
                text: 'two',
                scale: 'small'
            }]

        }];

    }
});

Answer 1

从Ext 4.2.0升级到Ext 4.2.1.883后，问题解决了