Extjs 6 组合框「queryMode : 'local' 」 data not showing」

Question

所以我有一个为特定 View 动态加载的组合框。 每当我将 queryMode 置于远程时，如果单击组合框，它就会加载数据，但如果设置为本地，则不会显示任何数据。 我的商店将正确返回请求的数据，只是它不会显示在组合框中。

我在这里遗漏了什么吗？ 希望有人能帮助我。

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

Answer 1

当您将 queryMode 设置为 local 时，这意味着不会从远程源加载数据，并且数据应由 Ext.data.ArrayStore 等定义

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

如果您只想从远程源加载数据一次并在本地组合查询数据，您应该手动添加商店项目

定义您的组合，例如:

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

然后将项目添加到组合中，例如:

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