'Extjs 6 combobox「queryMode: 'local'」 data not showing

So I have a combobox that is loaded dynamically for a certain view. Whenever I put the queryMode to remote, it would load the data if I clicked the combobox, but if set to local it won't show any data. My store will return the requested data properly, it's just it won't show in the combobox.

Am I missing something here? Hope someone can help me.

This is my controller for the view with the combobox:

Ext.define('Stm.controller.HpUpdate', {
    extend: 'Ext.app.Controller',

    requires: [
        'Stm.view.contents.hpupd.Detail'
    ],

    stores: [
        'SiteDomain'
    ],

    fromDetail: false,
    isAbort: false,
    isDataSeted: false,
    firstSorters: undefined,
    recordId: undefined,
    isUpdate: false,

    init: function() {
        this.callParent(arguments);
        console.log(Ext.getDisplayName(arguments.callee));

        this.control({
            'hup-list': {
                afterRender: this.setupStmList
            }
        });

        this.addRef([{
                ref: 'list',
                selector: 'hup-list'
            },
            {
                ref: 'detail',
                selector: 'hup-detail'
            },
        ]);
    },

    setupStmList: function() {
        console.log(Ext.getDisplayName(arguments.callee));

        var me = this;
        var store = me.getSiteDomainStore();
        var record = Cps.Util.baseRecord();

        store.load({
            params: param,
            callback: function(records, operation, success) {
                var response = operation.response;
                if (!response || response.length === 0) {
                    return;
                }

                var responseText = response.responseText;
                if (!responseText || responseText.length === 0) {
                    return;
                }
                var res = Ext.decode(responseText);

                if (res.common.st === 'mainte' || res.common.st === 'abort') {
                    return;
                }

                if (res.common.st === 'ng') {
                    Cps.Util.alert(res.common.msg);
                    return;
                }
                if (records.length === 0) {
                    return;
                }

                me.getList().down('#dtAplDateTimeFrom').down('#dateField').focus();
            }
        });

        me.firstSorters = this.getHpUpdateStore().getSorters();
    },
});

This is my view:

 Ext.define('Stm.view.contents.hpupd.List', {
     extend: 'Ext.container.Container',
     alias: 'widget.hup-list',
     layout: {
         type: 'vbox',
         align: 'stretch'
     },

     items: [{
         xtype: 'cps-combobox',
         fieldLabel: 'Domain',
         itemId: 'cmbSiteDomain',
         queryMode: 'local',
         store: {
             type: 'sitedomain'
         },
         width: 350,
         displayField: 'siteDomain',
         valueField: 'siteId',
     }],
 });

Store:

Ext.define('Stm.store.SiteDomain', {
extend: 'Extends.data.Store',
alias: 'store.sitedomain',
requires: [
    'Cps.Setting',
    'Stm.model.SiteInfo'
],

model: 'Stm.model.SiteInfo',

pageSize: Stm.Const.controller.dataCountLimit,
proxy: {
    type: 'ajax',
    url: Cps.Setting.getEntryUrl() + '/stm/st-update/site-domain',
    reader: {
        type: 'json',
        rootProperty: 'data'
    },
    actionMethods: {
        create: 'POST',
        read: 'POST',
        update: 'POST',
        destroy: 'POST'
    }
}
});
extjsextjs6extjs6-classicextjs6.5


Solution 1:[1]

When you set queryMode to local it means that data will not be loaded from remote source and data should be defined by for example Ext.data.ArrayStore

{
    xtype: 'combobox'
    queryMode: 'local',    
    valueField: 'id',
    displayField: 'name',
    store: new Ext.data.ArrayStore({
        fields: ['id', 'name'],
        data: [[1, 'item1'], [2, 'item2']] 
    })
}

If you want to data to be loaded from remote source just once and combo query data locally you should add store items manually

Define your combo like:

{
    xtype: 'combobox'
    itemId: 'myCombo'
    queryMode: 'local',    
    valueField: 'id',
    displayField: 'name',
    store: new Ext.data.ArrayStore({
        fields: ['id', 'name'],
        data: [] 
    })
}

And then add items to the combo like:

Ext.Ajax.request({
    url : 'Remote_Source',
    success: function(response, opts) {
         var json = Ext.decode(response.responseText),
             store = me.down("#myCombo").getStore();

         Ext.each(json.items, function(item){
            store.add(item);
         });
     }
});

Note: This is sample code you should add your implementation

Solution 2:[2]

This is exactly what I am doing. First I build my store by adding items. And then I use the store in my combobox with querymode: local. When I expand the combobox, no items show. When I change querymode to remote, the items show upon expansion, but they are grayed, as the store tries to load data from the server, which fails of course. I have not idea what to do about it. It looks like a bug to me.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Hesam Faridmehr
Solution 2 Robert Szelepcsenyi

Related Questions