组合框 - 下拉列表中的自动位置答案

【问题标题】：Combobox - Auto position in dropdown list组合框 - 下拉列表中的自动位置
【发布时间】：2013-07-31 07:42:21
【问题描述】：

我有一个简单的组合框如下：

                    {
                    xtype: 'combobox',
                    id: 'prd-main-group',
                    fieldLabel: 'ANA MAL GRUBU',
                    inputWidth: 320,
                    labelWidth: 160,
                    labelAlign: 'right',
                    margin: '15 0 0 0',
                    fieldStyle: 'height: 26px; text-align: right; font-size: 12pt; color:#505050',
                    store: articleMain,
                    valueField: 'WHG',
                    displayField: 'WHG_BEZ',
                    queryMode: 'remote',
                    autoSelect: false,
                    selectOnFocus: true,
                    hideTrigger: true,
                    msgTarget: 'side',
                    triggerAction: 'all',
                    typeAhead: true,
                    minChars: 2,
                    listeners: {
                        select: function (combo, selection) {
                            articleBase.proxy.extraParams = {'maingroup': combo.getValue()};
                            Ext.getCmp('prd-base-group').setDisabled(false);
                            Ext.getCmp('prd-base-group').getStore().removeAll();
                            Ext.getCmp('prd-base-group').setValue(null);
                            Ext.getCmp('prd-sub-group').getStore().removeAll();
                            Ext.getCmp('prd-sub-group').setValue(null);
                            articleBase.load();
                        },
                        focus: function(combo) {
                            combo.setValue('');
                        }
                    }
                },

当我输入两个或更多字符时，组合框下拉列表会出现并显示值，但不会自动定位下拉列表中选择的记录。

您可以看到附加的屏幕截图，该值已完成，但下拉列表未聚焦所选记录！

我的问题是，当我们键入几个字符时，下拉列表应该会根据给定的字符自动更改。

【问题讨论】：

标签： extjs extjs4

【解决方案1】：

没有裙子的巢穴我该怎么办:)

我们应该在store 定义中设置autoLoad: true 参数。之后我们还应该将queryMode 设置为local。我知道这没有任何意义，但是当我们设置autoLoad 时，数据会在商店创建后立即加载！

                    {

                    xtype: 'combobox',
                    id: 'prd-main-group',
                    fieldLabel: 'ANA MAL GRUBU',
                    inputWidth: 320,
                    labelWidth: 160,
                    labelAlign: 'right',
                    margin: '15 0 0 0',
                    fieldStyle: 'height: 26px; text-align: right; font-size: 12pt; color:#505050',
                    store: articleMain,
                    valueField: 'WHG',
                    displayField: 'WHG_BEZ',
                    queryMode: 'local',
                    autoSelect: true,
                    forceSelection: true,
                    msgTarget: 'side',
                    triggerAction: 'all',
                    listeners: {
                        select: function (combo, selection) {
                            articleBase.proxy.extraParams = {'maingroup': combo.getValue()};
                            Ext.getCmp('prd-base-group').setDisabled(false);
                            Ext.getCmp('prd-base-group').getStore().removeAll();
                            Ext.getCmp('prd-base-group').setValue(null);
                            Ext.getCmp('prd-sub-group').getStore().removeAll();
                            Ext.getCmp('prd-sub-group').setValue(null);
                            articleBase.load();
                        },
                        focus: function(combo) {
                            combo.setValue('');
                        }
                    }
                }

这里是商店定义：

var articleMain = new Ext.data.JsonStore({
model: 'ArticleMainGroup',
autoLoad: true,
proxy: {
    type: 'ajax',
    url: '<?php echo base_url() ?>create/get_product_main_group',
    reader: {
        type: 'json',
        root: 'articleMainGroup',
        idProperty: 'ID'
    }
}
});

【讨论】：

【解决方案2】：

你应该试试autoSelect: true。

【讨论】：

【解决方案3】：

ForceSelection="true" + TypeAhead="true" 它应该可以工作

【讨论】：