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

Posted 2023-03-16

【中文标题】extjs 组合框在单击时显示空白列表

【英文标题】：extjs combo box shows blank list when clicked

【发布时间】：2021-06-08 18:24:46

【问题描述】：

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

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

【讨论】：

如果从api返回的数组里面有不止一项，那么transform函数会如何变化呢？因为我相信 data[0] 只会返回第一个元素？

放一个循环并添加到项目数组中