extjs 组合框 getCount() on store 返回 0

Question

我正在尝试获取组合框中的项目数，以便我可以使用 getCount() 方法默认情况下使第一个值在组合框中可见，但我看到它总是返回 0，因此无法显示第一个项目在组合框中。

我的组合框的代码如下所示：

Ext.define('something....', {
    controller: 'some Controller',

    initComponent: function() {
        var me,
        me = this;

        me.items = [{
            xtype: 'form',
            items: [{
                xtype: 'combo',
                itemId: 'nameId',
                name:'nameId',
                labelAlign: 'top',
                fieldLabel: 'Name',
                store: me._getNames(),
                //disabled:some condition?true:false,//doesn't gray out combo 
                valueField:'dataId',
                displayField: 'firstName',
                editable: false,
                listeners:{
                   afterrender: function(combo,component) {
                    var combo = me.down('#nameId'); 
                    var nameStore = combo.getStore(); 
                    var setFirstRecord = function(combo){
                        var nameStore = combo.getStore(); 
                        if(nameStore.getCount() === 1){
                            combo.setValue(nameStore.getAt(0)); 
                        }
                    }

                    if(nameStore.isLoaded() === false){
                        nameStore.on('load', function(nameStore){
                            setFirstRecord(combo);
                        },this,{
                            single:true
                        });
                    }else{
                        setFirstRecord(nameStore); 
                    }
                   },
               }
            }]
        }];
    }

商店代码如下：

    _getNames: function (){
        var nameStore = Ext.create('Ext.data.Store', {
            autoLoad: true,
            proxy: {
                type: 'ajax',
                url: 'name.json',
                reader: {
                    type: 'json',
                    rootProperty:'items',
                    transform: function (data) {
                        var data = {
                           items: [{
                              dataId: data[0].dataId,
                              firstName: data[0].name.firstName,
                              nameDetails: data[0].nameDetails
                           }]
                        }
                        return data;
                    }
                },
            }, 
            fields: ['dataId', 'firstName','nameDetails']
        });

        return namesStore;
    }
})

从 api 返回填充存储的结果如下：

[
   {
      "dataId":1,
      "name":{
         "dataId":1,
         "firstName":"Julie",
         "code":"10",
         "connectionList":[
            "EMAIL"
         ]
      },
      "nameDetails":{
         "EMAIL":{
            "dataId":1,
            "detail":"EMAIL"
         }
      }
   }
]

任何关于缺少什么的建议都会很棒！

Answer 1

我在 Sencha Fiddle 中为您编写了该示例： https://fiddle.sencha.com/#view/editor&fiddle/3cdl

这解决了你的问题：

combo.getStore().on("load",
    function (store, records, successful, operation, eOpts) {
        if (store.getData().length > 0)
            combo.setValue(store.getData().get(0).getData().id)
    },
    this
)

Answer 2

您必须检查商店是否已加载并编写适当的代码：

...
...
xtype: 'combo',
itemId: 'nameId',
name: 'nameId',
labelAlign: 'top',
fieldLabel: 'Name',
store: this._getNames(),
valueField: 'dataId',
displayField: 'firstName',
editable: false,
listeners: {
    afterrender: function (combo) {
        var store = combo.getStore();
        var setFirstRecord = function (combo) {
            var store = combo.getStore();
            if (store.getCount() === 1) {
                combo.setValue(store.getAt(0));
            }
        }
        if (store.isLoaded() === false) {
            store.on('load', function (store) {
                setFirstRecord(combo);
            }, this, {
                single: true
            });
        } else {
            setFirstRecord(combo);
        }
    }
}
...
...