商店上的 extjs 组合框 getCount() 返回 0

Posted 2023-03-16

【中文标题】商店上的 extjs 组合框 getCount() 返回 0

【英文标题】：extjs combo box getCount() on store returns 0

【发布时间】：2021-06-10 18:58:45

【问题描述】：

我正在尝试获取组合框中的项目数，以便我可以使用 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返回的填充store的结果如下：

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

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

【参考方案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
)

【讨论】：

我是否将它包含在渲染后的函数中？

后与前无关。

请检查我为你写的小提琴。在这里，您可以正常运行。

【参考方案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);
        
    

...
...

【讨论】：

我没有看到任何变化发生，即使在尝试了与您上面提到的完全相同的代码之后。我还缺少其他东西吗？我已经在上面包含了你的代码，如果我在那里遗漏了什么，请告诉我。