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

Posted 2023-02-26

【中文标题】如何更改代码以使组合框显示 displayField 值列表

【英文标题】：How to change the code so that combobox shows the list of displayField values

【发布时间】：2012-10-05 20:08:29

【问题描述】：

如何修改代码，让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/

【参考方案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/

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

【讨论】：

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

不幸的是，ComboBox 使用了BoundList，它使用了从记录中提取数据的collectData 方法（请参阅refresh 方法）。因此，您的数据对象没有 "name.name" 属性，这就是您遇到此问题的原因。我也认为这是一种奇怪的行为，所以也许你最好发布一个错误报告。