extJs - 带有组合框单元格编辑的 GridPanel

Question

我有一个从本地商店填充的网格面板。我添加了用于编辑type 单元格的组合框。我希望从远程源填充我的组合框。但我不能让它加载任何数据。这是我的代码：

Ext.define('System.view.MainTab.NewConnection.Contacts', { 扩展：'Ext.grid.Panel'， 别名：'widget.newConnectionContactsPanel'，

requires: [
    'Ext.grid.View',
    'Ext.grid.column.Column',
    'Ext.form.field.ComboBox',
    'Ext.toolbar.Toolbar',
    'Ext.toolbar.Fill',
    'Ext.button.Button',
    'Ext.grid.plugin.RowEditing'
],

height: 250,
width: 400,
itemId: 'contactsGridPanel',
title: 'My Grid Panel',

initComponent: function() {
    var records = [];
    var store = new Ext.data.ArrayStore({
        fields: [
            {name: 'type'},
            {name: 'value'}
        ]
    });

    store.loadData(records);
    var me = this;

    Ext.applyIf(me, {
        columns: [
            {
                dataIndex: 'type',
                xtype: 'gridcolumn',
                text: 'Type',
                flex: 1,
                editor: {
                    xtype: 'combobox',
                    displayField: 'neme',
                    valueField: 'id',
                    queryMmode: 'remote',
                    store: new Ext.data.JsonStore({
                        proxy: {
                            type: 'ajax',
                            url: '/ws/rest/contacts/getKeywords.json?keywordType=CONTACTS',
                            reader: {
                                type: 'json',
                                root: 'data',
                                idProperty: 'id'
                            }
                        },
                        autoLoad: true,
                        fields: [
                            {type: 'integer', name: 'id'},
                            {type: 'string', name: 'name'}
                        ]
                    })

                }
            },
            {
                dataIndex: 'value',
                xtype: 'gridcolumn',
                text: 'Value',
                flex: 1,
                editor: {
                    xtype: 'textfield'
                }
            }
        ],
        dockedItems: [
            {
                xtype: 'toolbar',
                dock: 'bottom',
                items: [
                    {
                        xtype: 'tbfill'
                    },
                    {
                        xtype: 'button',
                        itemId: 'removeBtn',
                        text: 'Remove'
                    },
                    {
                        xtype: 'button',
                        itemId: 'addBtn',
                        text: 'Add',
                        listeners: {
                            click: function (button, e, eOpts) {
                                var grid = button.up('#contactsGridPanel');
                                var store = grid.getStore();

                                var rowEditing = grid.getPlugin('rowediting');
                                rowEditing.cancelEdit();
                                var record = store.add({})[0];

                                rowEditing.startEdit(record, 0);
                            }
                        }
                    }
                ]
            }
        ],
        plugins: [
            Ext.create('Ext.grid.plugin.RowEditing', {
                pluginId: 'rowediting',
                listeners: {
                    edit: function() {

                    }
                }
            })
        ]
    });

    me.callParent(arguments);
}

});

这是我从服务器收到的 json 响应：

{
  "success": true,
  "data": [
    {
      "id": 1,
      "name": "Fax"
    },
    {
      "id": 2,
      "name": "Home page"
    }
  ]
}

无法让一切顺利。组合框为空。我做错了什么？

Answer 1

您应该从远程来源获取列值。尝试添加 ma​​pping 属性。

autoLoad: true,
fields: [
   {type: 'integer', name: 'id', **mapping:'id'**},
   {type: 'string', name: 'name', **mapping :'name'**}
]

Answer 2

很可能是您的displayField 配置中有错字。

作为旁注，您应该真正说明您进行了哪种调试。说你“不能让它工作”并没有真正的帮助。请求是否命中服务器？商店是否在其中获取数据？提及您所做的事情将有助于别人回答您​​。