extjs combo box getCount() on store returns 0

I am trying to get the number of items in the combo box so that I can make the first value by default visible in the combo box using the getCount() method but I see it always return 0 so cannot get the first item to be displayed in the combo box.

Code for my combo box is as shown below:

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); 
                    }
                   },
               }
            }]
        }];
    }

Code for the store is as below:

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

The result returned from the api to populate the store is as follows:

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

Any suggestions on what’s missing would be great!

Answer

I am written that example for you in Sencha Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/3cdl

That solve your problem:

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

Advertisement

Answer