如何更改代碼，以便組合框顯示displayField列表值

Question

如何更改代碼，以便組合框顯示displayField值的列表時商店已經嵌套JSON數據。

當我通過組合框編輯欄中的「名」，它顯示了空單。

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'，因爲它按照網格的規定工作。

有沒有人遇到類似的問題？

UPDATE：

我已經找到一個解決方案。不是最好的，但它適用於我。

我動態添加新的字段映射配置成存儲模型時組合是init作爲組分。

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/

有誰知道更好的解決方案？