Javascript 单击extjs组合框时显示空白列表

我是extjs新手，尝试获取API调用返回的数据以显示在组合框中，但由于某些原因，组合框没有显示“firstName”。组合框有一个空下拉列表，上面没有显示任何内容。请在下面查找代码

组合框和创建存储的代码：

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

API调用（即name.json）返回的结果如下：

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

---

我正在尝试显示name.firstName。如何才能使其正常工作？这方面的任何帮助都会很好

只需在读取器的转换方法中写入适当的逻辑即可：

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

---

如果api返回的数组中有多个项，那么转换函数将如何更改？因为我相信数据[0]只会返回第一个元素，所以放一个循环并添加到项目数组中