extjs combo box shows blank list when clicked

Question

I am new to extjs and trying to get data returned from an API call to display into a combo box, but for some reason the combo box is not displaying the "firstName". The combo box, has an empty dropdown without anything displayed on it. Please find the code below.

Code for combo box and creating a store:

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(),
                valueField:'dataId',
                displayField: 'name.firstName',
                editable: false
            }]
        }];
    }

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

        return namesStore;
    }
})

The result I get returned from the API call (i.e, name.json) is as below:

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

I am trying to get name.firstName displayed.How can I get this to work? Any help on this would be great!

Answer 1

Just write appropriate logic in transform method of the reader:

Ext.define('MyPanel', {
    extend: 'Ext.panel.Panel',
    layout: 'fit',
    
    initComponent: function () {
        this.items = [{
            xtype: 'form',
            items: [{
                xtype: 'combo',
                itemId: 'nameId',
                name: 'nameId',
                labelAlign: 'top',
                fieldLabel: 'Name',
                store: this._getNames(),
                valueField: 'dataId',
                displayField: 'firstName',
                editable: false
            }]
        }];
        this.callParent();
    },

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

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('MyPanel', {
            title: "My Panel",
            width: 800,
            height: 600,
            renderTo: Ext.getBody()
        })
    }
});