对象值Extjs4的单元格编辑器

Celleditor for object value Extjs4

本文关键字：单元格 编辑器 Extjs4 对象      更新时间：2023-09-26

我正在寻找如何做到这一点的最佳解决方案。我所拥有的：

// model
Ext.define("User", {
    extend: "Ext.data.Model",
    fields: [
        {name: "id", type: "int"},
        {name: "name"},
        {name: "description", type: "string"}
    ]
});
// store with data
var oStore = new Ext.data.Store({
    model: "User",
    data: [
        {id: 1, name: {name:"John"}, description: "Fapfapfap"},
        {id: 2, name: {name:"Danny"}, description: "Boobooboo"},
        {id: 3, name: {name: "Tom"}, description: "Tralala"},
        {id: 4, name: {name:"Jane"}, description: "Ololo"},
    ]
});
// and finally I have a grid panel
Ext.create("Ext.grid.Panel", {
    columns: [
        {dataIndex: "id", header:"ID"},
        {
            dataIndex: "name", 
            header: "Name", 
            renderer: function(value){return value.name;}, 
            editor: "textfield"},
        {dataIndex: "description", header: "Description", flex: 1, editor: "htmleditor"}
    ],
    plugins: [new Ext.grid.plugin.CellEditing({clicksToEdit: 2})],
    store: store,
    renderTo: document.body
});​

当我在一个单元格上双击时，我在编辑器的字段中看到[object] Object，当我输入有效值时，我会在网格中看到空单元格。

所以，问题是——我如何设置celleditor来不是从record.name而是从record.name.name获取数据？

您可以覆盖模型上的get和set方法，因此将支持多级字段名称。以下是示例实现。

Ext.define("User", {
    extend: "Ext.data.Model",
    fields: [
        {name: "id", type: "int"},
        {name: "name"},
        {name: "description", type: "string"}
    ],
    get: function(key) {
        if (Ext.isString(key) && key.indexOf('.') !== -1) {
            var parts = key.split('.');
            var result = this.callParent([ parts[0] ]);
            return result[parts[1]];
        }
        return  this.callParent(arguments);
    },
    set: function(key, value) {
        if (Ext.isString(key) && key.indexOf('.') !== -1) {
            var parts = key.split('.');
            var result = this.get(parts[0]);
            result[parts[1]] = value;
            this.callParent([ parts[0], result ]);
            return;
        }
        this.callParent(arguments);
    }
});

我不确定商店是否检测到对name.name字段的更改。若并没有，您可能还应该将记录标记为脏记录。

工作样品：http://jsfiddle.net/lolo/dHhbR/2/

编辑器接受列的"dataIndex"字段中提供的任何值。既然"name"是一个对象，那就是你得到的。在编辑器中输入名称后，值等于字符串（而不是对象），并且渲染器正在尝试获取字符串的name属性。

解决此问题的最简单方法是将存储的"name"字段设置为字符串，而不是对象。然而，我认为你想这样做是有原因的。

CellEditing插件有三个可以监听的事件：beforedit、edit和validatedit。您可以实现一个beforedit侦听器，从列中获取"name"对象，然后获取该对象的"name"属性，并用该值填充编辑器。然后在validatedit上，从编辑器中获取值，并使用该值设置记录中"name"对象的"name"属性。

为了快速参考，这里有事件定义：CellEditing事件

一种更简单的方法是修改用户模型对象，以不同的方式映射"名称"属性：

{name: "name", mapping:'name.name'}

那么其他一切都保持不变。

相关文章：