Extjs 如何更改代码，使combobox显示displayField值的列表

如何更改代码，使combobox显示​​存储区具有嵌套json数据时显示字段值

当我按组合框编辑列“name”时，它显示空列表

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

---

这里的示例：

如果我将字段“name”映射设置为如下所示，它将按预期工作

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

并按如下方式配置网格列：

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

更改的示例如下：

但我不想将字段“name.name”的名称更改为“name”，因为它的工作方式与网格的工作方式相同

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

更新：

我找到了一个解决办法。不是最好的，但对我来说很有效

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

您可以在此处找到更改的示例：

---

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

如果我将字段“名称”映射设置为如下所示，它将正常工作

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

并按如下方式配置网格列：

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

更改的示例如下：

但我不想将字段“name.name”的名称更改为“name”，因为它的工作方式与网格的工作方式相同

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

更新：

我找到了一个解决办法。不是最好的，但对我来说很有效

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

您可以在此处找到更改的示例：

---

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

当我将displayField更改为错误的字段名时，组合框下拉列表显示空项。但是，当displayField为right时，组合框下拉列表为空。不幸的是，

combobox

使用了

BoundList

，使用了从记录中提取数据的

collectData

方法（参见方法）。因此，您的数据对象没有

“name.name”

属性，这就是出现此问题的原因。我还认为这是一种奇怪的行为，所以也许你们最好发布一个bug报告。当我将displayField更改为错误的字段名时，Combobox下拉列表会显示空项。但是，当displayField为right时，组合框下拉列表为空。不幸的是，

combobox

使用了

BoundList

，使用了从记录中提取数据的

collectData

方法（参见方法）。因此，您的数据对象没有

“name.name”

属性，这就是出现此问题的原因。我也认为这是一种奇怪的行为，所以也许你最好发布一个bug报告。