How to change the code so that combobox shows the list of displayField values

Question

How to change the code so that combobox shows the list of ​​displayField values when store has nested json data.

When I edit column "name" by combobox, it shows empty list.

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

Example here: http://jsfiddle.net/3MknG/2/

Answer 1

It works as intended if I set field 'name' mapping as below.

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

And configure the grid column like this:

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

Changed example is here: http://jsfiddle.net/3MknG/3/

But I don't want to change the name of field 'name.name' to 'name' because it works as intended for grid.

Has anyone encountered a similar problem?

UPDATE:

I have found one solution. Not the best but it works for me.

I add new field with mapping configuration dynamically to store model when combo is init as component.

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

Changed example you can find here: http://jsfiddle.net/3MknG/7/

Does anyone know better solution?