如何更改代码以使组合框显示 displayField 值列表

Question

如何修改代码，让combobox在store有嵌套json数据时显示displayField值的列表。

当我通过组合框编辑“名称”列时，它显示空列表。

Ext.define("Model", {
    extend: "Ext.data.Model",
    fields: [
        {name: "id", type: "int"},
        {name: "name.name"},
        {name: "phone", mapping: "name.phone"},
        {name: "descr", type: "string", mapping:'description'}
    ]
});

// store with data that we will recieve from test echo ajax service
var Store = Ext.create("Ext.data.Store", {
    model: "Model",
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: '/echo/json/',
        actionMethods: {read: 'POST'}, // echo ajax service required
        extraParams: {
            json: Ext.JSON.encode({
                root: [{id: 1, name: {name:"John", phone: "123"}, description:"Fapfapfap"},
                       {id: 2, name: {name:"Danny", phone: "234"}, description:"Boobooboo"},
                       {id: 3, name: {name:"Tom", phone: "345"}, description:"Tralala"},
                       {id: 4, name: {name:"Jane", phone: "456"}, description:"Ololo"},]
                })
        },
        reader: {
            type: 'json',
            root: 'root'
        }
    },
});

// and finally I have a grid panel
Ext.create("Ext.grid.Panel", {
    store: Store,
    columns: [
        {dataIndex: "id", header:"ID"},
        {dataIndex: "name.name", header:"Name", flex: 1, editor: {xtype:"combo", store: Store, displayField:'name.name'}},
        {dataIndex: "phone", header:"Phone", flex: 1, editor: "textfield"},
        {dataIndex: "descr", header: "Description", flex: 2, editor: "htmleditor"}
    ],
    //selType: 'rowmodel',
    plugins: [Ext.create('Ext.grid.plugin.CellEditing')],
    renderTo: Ext.getBody(),
});

此处示例：http://jsfiddle.net/3MknG/2/

Answer 1

如果我将字段“名称”映射设置如下。

{name: "name", mapping: "name.name"}

并像这样配置网格列：

{dataIndex: "name", header:"Name", flex: 1, 
 editor: {xtype:"combo", store: Store, displayField:'name'}},

更改示例在这里：http://jsfiddle.net/3MknG/3/

但我不想将字段 'name.name' 的名称更改为 'name'，因为它适用于网格。

有没有人遇到过类似的问题？

更新：

我找到了一种解决方案。不是最好的，但对我有用。

当组合初始化为组件时，我会动态添加具有映射配置的新字段以存储模型。

Ext.define("MyCombo", {
    extend: "Ext.form.field.ComboBox",
    alias:"widget.mycombo",
    initComponent: function(){
        var me = this;

        if (me.displayMapping) {
            var store = me.getStore();
            var proxy = store.getProxy();
            var model = proxy.getModel();
            me.displayField = Ext.id(me.displayMapping); // It is necessary to have difference between the name and other existing names in model.
            // Add new field with mapping to store model
            model.prototype.fields.add(new Ext.data.Field({ name: me.displayField,
                                                            mapping: me.displayMapping}));
        }
        me.callParent();
    }
});

Ext.create("Ext.grid.Panel", {
    store: Ext.create("MyStore"),
    columns: [
        {dataIndex: "id", header:"ID"},
        {dataIndex: "name.name", header:"Name", flex: 1, 
                    editor: {xtype: "mycombo",
                             store: Ext.create("MyStore"),         
                             displayMapping: "name.name"}},
        {dataIndex: "phone", header:"Phone", flex: 1, editor: "textfield"},
        {dataIndex: "descr", header: "Description", flex: 2, editor: "htmleditor"}
    ],
    plugins: [Ext.create('Ext.grid.plugin.CellEditing')],
    renderTo: Ext.getBody(),
});

您可以在此处找到更改后的示例：http://jsfiddle.net/3MknG/7/

有人知道更好的解决方案吗？