ExtJS 4不能在网格内的组合中呈现值(单元格编辑器插件)

ExtJS 4 Cannot render values in combo inside grid (cell editor plugin)

本文关键字:单元格 编辑器 插件 不能 网格 组合 ExtJS      更新时间:2023-09-26

我已经使用Sencha ExtJS 4.2实现了一些用户界面一段时间了,我设法做了几乎所有的事情,但是当我试图使用由combobox处理的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;
            }
        }
    }
});

我在这里错过了什么吗?如有任何帮助,不胜感激。

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

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

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

<<p> 代码片段/strong>
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
        }
    }
});