javascript - ExtJS 4 无法在网格内的组合中呈现值(单元格编辑器插件)

Question

我使用 Sencha ExtJS 4.2 实现一些用户界面已经有一段时间了，我几乎完成了所有事情，但在尝试使用带有 的网格时遇到了一些问题>celleditor 由组合框处理。

我用来在网格中显示信息的数据对象如下:

对象数组，其中属性 ASSOCIATED_TICKETS 是一个数组:

->[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;
            }
        }
    }
});

我在这里缺少什么吗？任何帮助将不胜感激。

预先感谢您的时间和帮助。

Answer 1

问题在于celleditor的存储没有指定任何字段，因此加载的记录没有数据。

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

代码片段

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