2
votes

I have a simple combobox as follows :

                    {
                    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('');
                        }
                    }
                },

When I typed two or more characters, the combobox dropdown list appear and showing the values but no automatically position selected record from the dropdown list.

As you can see attached screen shot, the value completed but drop down list didn't focused selected record!

enter image description here

My question is, when we type a few chars, the dropdown list should automatically change based on the given chars.

3

3 Answers

1
votes

Without Skirtle's Den what will I do :)

We should set autoLoad: true parameter in the store definition. After that we also should set queryMode to local. I know it doesn't make sense but when we set autoLoad, data loaded as soon as store created!

                    {

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

And here is the store definition :

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'
    }
}
});
0
votes

You should try with autoSelect: true.

0
votes

ForceSelection="true" + TypeAhead="true" and it should work