Javascript ExtJS 4无法在网格内的组合中呈现值（单元格编辑器插件）

我使用Sencha ExtJS 4.2实现一些用户界面已经有一段时间了，我几乎做了所有的事情，但是当我尝试使用由组合框处理的带有

celleditor

的网格时，我遇到了一些问题

我用于在网格中显示信息的数据对象如下所示：

Ext.define('TKTSYS.webportal.MyGrid', {
    extend: 'Ext.grid.Panel',
    //Create the grid in the init Component method 
    initComponent: function() {
        var me = this;
        Ext.apply(this, {
            id: 'mygrid',
            scope: this,
            //Here is my Store, it will handle the information
            store: Ext.create('Ext.data.JsonStore', {
                fields: ["TKTNUM", "ASSOCIATED_TICKETS", "DEFAULT_TKT"]
            }),
            columns: [{
                    text: "Main ticket",
                    dataIndex: 'TKTNUM'
                    flex: 1
                },
                {
                    text: "Associated Tickets",
                    dataIndex: 'DEFAULT_TKT',
                    flex: 1,
                    //This will render the values of the combo
                    renderer: renderCombo,
                    //This will be the combo editor
                    editor: Ext.create('Ext.form.field.ComboBox', {
                        id: 'associated_tkts',
                        queryMode: 'local'
                        displayField: 'ASSOC_TKT_VAL',
                        valueField: 'ASSOC_TKT_VAL',
                        ,
                        editable: false,
                        store: []
                    })
                }
            ],
            plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })]
        })
        me.generateData();
    },
    //Retrieves data and put into the grid
    generateData: function() {
        //Call Web Service REST and retrieve the data
        var dataArray = getArrayOfObjectsFromRest();
        var chart = Ext.getCmp('mygrid');
        var chartStore = chart.store;
        chartStore.removeAll(true);
        chartStore.clearFilter(true);
        chartStore.loadData(dataArray);
    },

    //Render the information of the combo
    renderCombo: function(value, meta, record) {
        var targetStore = record.data.ASSOCIATED_TICKETS;
        meta.column.editor.getStore().loadData(targetStore);
        for (var i = 0; i < targetStore.length; i++) {
            var currTktInfo = targetStore[i];
            if (currTktInfo.ASSOC_TKT_VAL === value) {
                return value;
            }
        }
    }
});

属性

关联的\u票据

为数组的对象数组：

->[0]{'TKTNUM': '123', 
      'ASSOCIATED_TICKETS': 
              [{ASSOC_TKT_VAL:'XY', AGE: 2}, {ASSOC_TKT_VAL:'AB', AGE: 3}], 
      'DEFAULT_TKT': 'XY'
     }

->[1]{'TKTNUM': '234', 
      'ASSOCIATED_TICKETS': 
              [{ASSOC_TKT_VAL:'CD', AGE: 1}], 
      'DEFAULT_TKT': 'CD'
     }

->[2]{'TKTNUM': '567', 
      'ASSOCIATED_TICKETS': 
              [], 
      'DEFAULT_TKT': ''
     }

我应该为每个条目显示3行，条目中的数组应该显示在一个组合中

 _________________________
|ticket|associated tickets|
---------------------------
|123   |[XY             v]|
|456   |[CD             v]|
|789   |                  |
---------------------------

我设法在网格中进行组合，但每当我加载页面时，我只是接收第一个元素，当我单击组合时，它会显示空格，但根本没有文本。如果我想为我的第一行选择另一个值，它应该在我的组合框中显示'AB'作为选项，但它显示的是一个空字符串

字段“DEFAULT_TKT”只是一个参考，用于知道此时选择了哪个关联的票证，以便我可以根据用户的选择执行一些附加操作

我的网格代码如下所示：

Ext.define('TKTSYS.webportal.MyGrid', {
    extend: 'Ext.grid.Panel',
    //Create the grid in the init Component method 
    initComponent: function() {
        var me = this;
        Ext.apply(this, {
            id: 'mygrid',
            scope: this,
            //Here is my Store, it will handle the information
            store: Ext.create('Ext.data.JsonStore', {
                fields: ["TKTNUM", "ASSOCIATED_TICKETS", "DEFAULT_TKT"]
            }),
            columns: [{
                    text: "Main ticket",
                    dataIndex: 'TKTNUM'
                    flex: 1
                },
                {
                    text: "Associated Tickets",
                    dataIndex: 'DEFAULT_TKT',
                    flex: 1,
                    //This will render the values of the combo
                    renderer: renderCombo,
                    //This will be the combo editor
                    editor: Ext.create('Ext.form.field.ComboBox', {
                        id: 'associated_tkts',
                        queryMode: 'local'
                        displayField: 'ASSOC_TKT_VAL',
                        valueField: 'ASSOC_TKT_VAL',
                        ,
                        editable: false,
                        store: []
                    })
                }
            ],
            plugins: [Ext.create('Ext.grid.plugin.CellEditing', {
                clicksToEdit: 1
            })]
        })
        me.generateData();
    },
    //Retrieves data and put into the grid
    generateData: function() {
        //Call Web Service REST and retrieve the data
        var dataArray = getArrayOfObjectsFromRest();
        var chart = Ext.getCmp('mygrid');
        var chartStore = chart.store;
        chartStore.removeAll(true);
        chartStore.clearFilter(true);
        chartStore.loadData(dataArray);
    },

    //Render the information of the combo
    renderCombo: function(value, meta, record) {
        var targetStore = record.data.ASSOCIATED_TICKETS;
        meta.column.editor.getStore().loadData(targetStore);
        for (var i = 0; i < targetStore.length; i++) {
            var currTktInfo = targetStore[i];
            if (currTktInfo.ASSOC_TKT_VAL === value) {
                return value;
            }
        }
    }
});

Ext.define（'TKTSYS.webportal.MyGrid'{
扩展：“Ext.grid.Panel”，
//在init组件方法中创建网格
initComponent:function（）{
var me=这个；
Ext.apply（本{
id:'mygrid'，
范围:本,，
//这是我的商店，它会处理信息
存储区：Ext.create（'Ext.data.JsonStore'{
字段：[“TKTNUM”、“关联的\u票据”、“默认\u TKT”]
}),
栏目：[{
正文：“主票”，
数据索引：“TKTNUM”
弹性：1
},
{
文本：“关联票据”，
数据索引：“默认值”，
弹性：1，
//这将呈现组合的值
渲染器：renderCombo，
//这将是组合编辑器
编辑器：Ext.create（'Ext.form.field.ComboBox'{
id:'关联的\u tkts'，
queryMode:“本地”
显示字段：'ASSOC_TKT_VAL'，
valueField:“ASSOC_TKT_VAL”，
,
可编辑：false，
商店：[]
})
}
],
插件：[Ext.create（'Ext.grid.plugin.CellEditing'{
单击编辑：1
})]
})
me.generateData（）；
},
//检索数据并放入网格
generateData:function（）{
//调用Web服务REST并检索数据
var dataArray=getArrayOfObjectsFromRest（）；
var chart=Ext.getCmp（'mygrid'）；
var chartStore=chart.store；
chartStore.removeAll（true）；
chartStore.clearFilter（true）；
加载数据（数据数组）；
},
//呈现组合的信息
renderCombo：函数（值、元、记录）{
var targetStore=record.data.ASSOCIATED_票据；
meta.column.editor.getStore（）.loadData（targetStore）；
对于（变量i=0；i

这里有我遗漏的东西吗？任何帮助都将不胜感激

---

提前感谢您的时间和帮助。

问题是

celleditor

的存储区没有指定任何字段，因此加载的记录没有数据

我还建议您使用单元格编辑插件的“beforeedit”事件，因为render将被多次调用，并且根本不起作用，但我甚至不想尝试

代码片段

Ext.create('Ext.grid.Panel', {
    id: 'mygrid',
    width: 500,
    height: 200,
    title: 'Test Grid',
    //Here is my Store, it will handle the information
    store: Ext.create('Ext.data.JsonStore', {
        fields: ["TKTNUM", "ASSOCIATED_TICKETS", "DEFAULT_TKT"],
        data: [{
            "TKTNUM": 123,
            "ASSOCIATED_TICKETS": [{
                "ASSOC_TKT_VAL": "XY",
                "AGE": 2
            }, {
                "ASSOC_TKT_VAL": "AB",
                "AGE": 3
            }],
            "DEFAULT_TKT": "XY"
        }, {
            "TKTNUM": "234",
            "ASSOCIATED_TICKETS": [{
                "ASSOC_TKT_VAL": "CD",
                "AGE": 1
            }],
            "DEFAULT_TKT": "CD"
        }, {
            "TKTNUM": 567,
            "ASSOCIATED_TICKETS": [],
            "DEFAULT_TKT": ""
        }]
    }),
    columns: [{
        text: 'Main ticket',
        dataIndex: 'TKTNUM',
        flex: 1
    }, {
        text: 'Associated Tickets',
        dataIndex: 'DEFAULT_TKT',
        flex: 1,
        //This will be the combo editor
        editor: {
            xtype: 'combobox',
            queryMode: 'local',
            displayField: 'ASSOC_TKT_VAL',
            valueField: 'ASSOC_TKT_VAL',
            editable: false,
            store: {
                xtype: 'array',
                fields: ["ASSOC_TKT_VAL", "AGE"]
            }
        }
    }],
    renderTo: document.body,
    plugins: [{
        ptype: 'cellediting',
        clicksToEdit: 1
    }],
    listeners: {
        beforeedit: function(e, eOpts) {
            console.log(arguments)
            var store = eOpts.column.getEditor().getStore();
            var targetStore = eOpts.record.get('ASSOCIATED_TICKETS');
            console.log(targetStore);
            store.loadData(targetStore);
            console.log(store.getRange()); //check what is read
        }
    }
});

---

马塞洛，你能帮我做一把小提琴吗？我真的很想帮助你，但是为了重现这个问题，我不得不模拟数据，如果你只提供一个测试用例，这似乎更容易。这里，我给了你一点帮助：谢谢我的朋友，很抱歉延迟了回复。您的示例工作得几乎完美，唯一的一点是，每当我选择组合时，对于第一种情况，只显示一个元素，而适合组合的数组包含两个元素。我正在调试以检查为什么会发生这种情况，但您的示例确实帮助了我很多，谢谢！非常感谢丹尼尔，这对我帮助很大。我删除了渲染器并使用了“beforeedit”，但你也认为这不是一个好方法吗？您还有什么其他建议我可以在这个实现中使用吗？再次感谢你！