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

Question

我是 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。我怎样才能让它工作？ 对此的任何帮助都会很棒！

Answer 1

只需在阅读器的 transform 方法中编写适当的逻辑即可：

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