Question

我有一个网格，在最后两列（Chourly和Cdaily）中，每个单元格都包含一个对象。数据示例：

{
    data: [{
        Date: "2018/01/11 21:00:00",
        Ahourly: "1",
        Chourly: {
            val: 2,
            status: "Low",
            color: "#ffff00"
        }
    }, ...
    success: true
}

这是我的fiddle，请参阅Chourly和Cdaily专栏。

我需要编辑此对象的数据并显示新值。我尝试使用beforeedit end validateedit，但现在没有成功！

任何帮助？

谢谢，

MPE

Answer 1

首先要做的是调整商店中的数据模型。使用＆＃34;映射＆＃34;将对象字段中的所有字段容纳到单个字段中，那样：

 var store = Ext.create('Ext.data.JsonStore', {
        fields: [
            'Date',
            'Ahourly',
            {name:'ChourlyVal',mapping:'Chourly.val'},
            {name:'ChourlyColor',mapping:'Chourly.color'},
            {name:'ChourlyStatus',mapping:'Chourly.status'},
            {name:'CdailyVal' ,mapping:'Cdaily.val'},
            {name:'CdailyColor' ,mapping:'Cdaily.color'},
            {name:'CdailyStatus' ,mapping:'Cdaily.status'}
            ],
        proxy: {
            type: 'ajax',
            url: 'data1.json',
            reader: {
                type: 'json',
                rootProperty: 'data'
            }
        },
        autoLoad: true
    });

然后，调整列和渲染器以使用映射的字段：

 {
            text: 'Chourly',
            dataIndex: 'ChourlyVal',
            flex: 1,
            renderer: function (a, meta, record) {
                console.log(record);
                meta.tdStyle = "background-color:" + record.data.ChourlyColor + ";";
                var cellText = a + " " + record.data.ChourlyStatus;
                return cellText;
            },
            editor: 'textfield'
        }

我希望有帮助

Answer 2

感谢您的回复。我认为这是好方法。然后我想我必须使用serialize函数将对象与修改后的值一起放回到服务器，如下所示：

fields: ['Date', {
                name: 'Chourly',
                serialize: function (val, rec) {
                    return {
                        'val': rec.get('val'),
                        'status': rec.get('status'),
                        'color': rec.get('color')
                    };
                }
            }, {
                name: 'val',
                mapping: 'Chourly.val',
                persist: false //Do not write back to server
            }, {
                name: 'status',
                mapping: 'Chourly.status',
                persist: false

            }, {
                name: 'color',
                mapping: 'Chourly.color',
                persist: false

            }, 
            ...
        ]...

现在我必须动态地这样做，因为我事先并不知道用户会咨询哪些数据（Chourly，Dhourly，Ehourly ......）。有没有想过在负载回调上修改模型？

Sencha Extjs 6.2：在单元格网格中编辑对象值

2 个答案: