c# - 动态属性(嵌套)用作 ExtJS 中的网格列

Question

我尝试在我的原型(prototype) mongoDB 应用程序中使用动态属性方法。

基本上，这种方法只会给你这样的东西:

{
  SKU: "Y32944EW",
  type: "shoes",
  attr: [
      { "k": "manufacturer", 
        "v": "ShoesForAll",
      },
      { "k": "color", 
        "v": "blue",
      },
      { "k": "style", 
        "v": "comfort",
      },
      { "k": "size", 
        "v": "7B"
      }
  ]
}

(来源:http://askasya.com/post/dynamicattributes)。

问题在于，例如 Kendo Grid 在其数据源中不支持此类嵌套结构。

有谁知道 Sencha ExtJS 网格组件是否可以做到这一点？

---

更新: SKU 应该是一列，并且 attr 数组的每个 v 都应该是一列。

---

更新:我正在尝试在您的答案的帮助下设置一个sencha fiddle 。

https://fiddle.sencha.com/#fiddle/evc

app.js (rev2)

// create the new type
Ext.data.Types.DYNAMIC = {
    convert: function(value, record) {
       for (var i = 0, ln = value.length; i < ln; i++) {
                var item = value[i];
                record.set(item.k, item.v);
            }
            return '';
    },
    type: 'dynamic',
    sortType: Ext.data.SortTypes.none
};

// define a model
Ext.define('TestModel', {
    extend: 'Ext.data.Model',
    fields: [{name: "_id",type: "string"},
    {name: "attr",type:  Ext.data.Types.DYNAMIC}],
    idProperty: '_id'
});
// create a store with the model assigned
Ext.create('Ext.data.Store', {
    storeId: 'MyStore',
    model: 'TestModel',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: '/data.json',
        reader: {
            idProperty: '_id',
            type: 'json',
            root: 'data'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Grid',
    store: Ext.data.StoreManager.lookup('MyStore'),
    columns: []

}); 

Ext.widget('window',{height: 200,width: 400, items: [grid ] }).show();

store.on('metachange', function(store, meta) {
    grid.reconfigure(store, meta.columns);
});

data.json (rev2)

   {
    "metaData": {
        "idProperty": "_id",
        "rootProperty": "data",
        "fields": [
            { "name": "_id","type": "string" },
            { "name": "de", "type":"string" },
            { "name": "en", "type":"string" },
            { "name": "fr", "type":"string" },
            { "name": "attr", "type":  "dynamic"}
        ],
        "columns": [
            {
                "header": "de",
                "dataIndex": "de"
            },
            {
                "header": "en",
                "dataIndex": "en"
            }
            ,
            {
                "header": "fr",
                "dataIndex": "fr"
            }
        ]
    },
 "data":     
        [
            {"_id": "MyTextId1",
                "attr":[
                    {
                        "k": "de",
                        "v": "GermanText Sample"
                    }, 
                    {
                        "k": "en",
                        "v": "English Text Sample"
                    }, 
                    {
                        "k": "fr",
                        "v": "French Text Sample"
                    },
                ]
            },
           {"_id": "MyTextId2",
               "attr":[
                   {
                       "k": "de",
                       "v": "GermanText Sample 1"
                   }, 
                   {
                       "k": "en",
                       "v": "English Text Sample 1"
                   }, 
                   {
                       "k": "fr",
                       "v": "French Text Sample1 1"
                   },
               ]
           }
        ]
}

错误消息:

 Uncaught Error: [Ext.createByAlias] Unrecognized alias: data.field.[object Object]

---

更新:适用于 sra 上次编辑中发布的代码片段。谢谢!

Answer 1

是的，你可以。其中大部分已经内置。让我们从基础开始

Response MetaData

除了记录数据之外，服务器还可以在其响应中返回元数据，这些元数据描述数据集本身的属性或用于重新配置读取器。要在响应中传递元数据，您只需将metaData 属性添加到响应数据的根即可。 metaData 属性可以包含任何内容，但支持由 Reader 处理的一组特定属性(如果存在):

root: the property name of the root response node containing the record data
totalProperty: property name for the total number of records in the data
successProperty: property name for the success status of the response
messageProperty: property name for an optional response message
fields: Config used to reconfigure the Model's fields before converting the response data into records

包含所有这些属性的初始 Reader 配置可能如下所示(“字段”将包含在模型定义中，未显示):

reader: {
    type : 'json',
    root : 'root',
    totalProperty  : 'total',
    successProperty: 'success',
    messageProperty: 'message'
}

如果您要传递一个包含与上面最初定义的属性不同的属性的响应对象，您可以使用metaData 属性来动态重新配置Reader。例如:

{
    "count": 1,
    "ok": true,
    "msg": "Users found",
    "users": [{
        "userId": 123,
        "name": "Ed Spencer",
        "email": "<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f7f6d2e1f7fcf1faf3bcf1fdff" rel="noreferrer noopener nofollow">[email protected]</a>"
    }],
    "metaData": {
        "root": "users",
        "totalProperty": 'count',
        "successProperty": 'ok',
        "messageProperty": 'msg'
    }
}

您还可以将所需的任何其他任意数据放入 metaData 属性中，这些数据将被 Reader 忽略，但可以通过 Reader 的 metaData 属性进行访问(该属性也通过 Proxy 的 metachange 事件传递给监听器(也由商店)。然后应用程序代码可以以其选择的任何方式处理传递的元数据。

如何使用此功能的一个简单示例是自定义绑定(bind)到网格的模型的字段。通过传递 fields 属性，模型将由 Reader 在内部自动更新，但该更改不会自动反射(reflect)在网格中，除非您还更新列配置。您可以手动执行此操作，也可以简单地将标准网格列配置对象作为元数据属性的一部分传递，然后将其传递到网格。下面是一个非常简单的示例，说明了如何实现这一点:

// response format:
{
    ...
    "metaData": {
        "fields": [
            { "name": "userId", "type": "int" },
            { "name": "name", "type": "string" },
            { "name": "birthday", "type": "date", "dateFormat": "Y-j-m" }
        ],
        "columns": [
            { "text": "User ID", "dataIndex": "userId", "width": 40 },
            { "text": "User Name", "dataIndex": "name", "flex": 1 },
            { "text": "Birthday", "dataIndex": "birthday", "flex": 1, "format": 'Y-j-m', "xtype": "datecolumn" }
        ]
    }
}

阅读器将自动读取元字段配置并根据新字段重建模型，但要处理新的列配置，您需要处理应用程序代码中的元数据。通过处理存储或代理上的元更改事件即可简单地完成此操作，例如:

var store = Ext.create('Ext.data.Store', {
    ...
    listeners: {
        'metachange': function(store, meta) {
            myGrid.reconfigure(store, meta.columns);
        }
    }
});

---

这是基础知识。现在是您的数据结构的详细信息:

首先我们需要一个转换器函数来读取自定义数据

convert: function(value,record) {
    for(var i=0,ln=value.length;i<ln;i++) {
        var item = value[i];
        record.set(item.k,item.v);
    }
    return ''; let's save memory an drop it
}

我们可以发布基本字段(和列(未显示)) - 但我们不需要，因为元更改可以处理这一切

{ name: "SKU", type:"string") }, // don't forget to mark this as the idProperty in the reader and in the model
{ name: "type", type:"string") },
{ name: "attr", type:"auto", convert: convert() }

下面的所有字段和列均由服务器通过元更改发布

"metaData": {
    "fields": [
        { name: "SKU", type:"string") }, 
        { name: "type", type:"string") },
        { name: "attr", type:"auto", convert: convert() },
        // and the dynamic datafields
        { name: "manufacturer", type:"string" },
        { name: "style", type:"string" },
        // ... and so on
    ],
    "columns": [
        { "text": "ID", "dataIndex": "SKU", "width": 40 },
        { "text": "ID", "dataIndex": "SKU", "width": 40 },
        // and the dynamic datacolumns
        { "text": "Manufacturer", "dataIndex": "manufacturer" },
        { "text": "Style", "dataIndex": "stlye" },
        // ... and so on
    ]
}

---

编辑:

我建议创建您自己的阅读器，在进一步处理之前将数据转换为规范化的 JSON，或者您自己的 Ext.data.Types类型。因为我认为它更快一点，所以我建议创建您自己的数据类型。您的情况的缺点是，具有此属性的字段需要始终位于动态字段之后，否则读者将覆盖动态字段。

这是我用 4.2.3 测试的片段

// create the new type
Ext.data.Types.DYNAMIC = {
    convert: function(value, record) {
        for (var i = 0, ln = value.length; i < ln; i++) {
            var item = value[i];
            record.data[item.k] = item.v;
        }
        return '';
    },
    type: 'dynamic',
    sortType: Ext.data.SortTypes.none
};

// define a model
Ext.define('TestModel', {
    extend: 'Ext.data.Model',
    fields: [{name: "_id",type: "string"},
    {name: "attr",type: "dynamic"}],
    idProperty: '_id'
});
// create a store with the model assigned
Ext.create('Ext.data.Store', {
    storeId: 'MyStore',
    model: 'TestModel',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: '/data.json',
        reader: {
            idProperty: '_id',
            type: 'json',
            root: 'data'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Grid',
    store: Ext.data.StoreManager.lookup('MyStore'),
    columns: []

}); 

Ext.widget('window',{height: 200,width: 400, items: [grid ] }).show();

store.on('metachange', function(store, meta) {
    grid.reconfigure(store, meta.columns);
});

还有数据

{
    "metaData": {
        "idProperty": "_id",
        "rootProperty": "data",
        "fields": [
            { "name": "_id","type": "string" },
            { "name": "de", "type":"string" },
            { "name": "en", "type":"string" },
            { "name": "fr", "type":"string" },
            { "name": "attr", "type": "dynamic" }
        ],
        "columns": [
            {
                "header": "de",
                "dataIndex": "de"
            },
            {
                "header": "en",
                "dataIndex": "en"
            }
            ,
            {
                "header": "fr",
                "dataIndex": "fr"
            }
        ]
    },
 "data":     
        [
            {"_id": "MyTextId1",
                "attr":[
                    {
                        "k": "de",
                        "v": "GermanText Sample"
                    }, 
                    {
                        "k": "en",
                        "v": "English Text Sample"
                    }, 
                    {
                        "k": "fr",
                        "v": "French Text Sample"
                    },
                ]
            },
           {"_id": "MyTextId2",
               "attr":[
                   {
                       "k": "de",
                       "v": "GermanText Sample 1"
                   }, 
                   {
                       "k": "en",
                       "v": "English Text Sample 1"
                   }, 
                   {
                       "k": "fr",
                       "v": "French Text Sample1 1"
                   },
               ]
           }
        ]
}

---

编辑:

这个片段在 5.1 中进行了测试并且有效

Ext.data.Types.DYNAMIC = {
    convert: function(value, record) {
        for (var i = 0, ln = value.length; i < ln; i++) {
            var item = value[i];
            record.data[item.k] = item.v;
        }
        return '';
    },
    type: 'dynamic',
    sortType: Ext.data.SortTypes.none
};


Ext.define('Ext.data.field.Dynamic', {
    extend: 'Ext.data.field.Field',

    alias: 'data.field.dynamic',

    sortType: 'none',

    isDynamicField: true,

    convert: function(value, record) {
        for (var i = 0, ln = value.length; i < ln; i++) {
            var item = value[i];
            record.data[item.k] = item.v;
        }
        return '';
    },

    getType: function() {
        return 'dynamic';
    }
});


Ext.define('TestModel', {
    extend: 'Ext.data.Model',
    fields: [{name: "_id",type: "string"},{name: "attr",type: "dynamic"}],
    idProperty: '_id'
});

var store = Ext.create('Ext.data.Store', {
    storeId: 'MyStore',
    model: 'TestModel',
    autoLoad: true,
    proxy: {
        type: 'ajax',
        url: '/qat/Content/TST/data.js',
        reader: {
            idProperty: '_id',
            type: 'json',
            rootProperty: 'data'
        }
    }
});

var grid = Ext.create('Ext.grid.Panel', {
    title: 'Grid',
    store: Ext.data.StoreManager.lookup('MyStore'),
    dockedItems: [{xtype: 'pagingtoolbar',store: Ext.data.StoreManager.lookup('MyStore'), dock: 'bottom',displayInfo: false}],
    columns: []

}); 
Ext.widget('window',{height: 200,width: 400, items: [grid ] }).show();

store.on('metachange', function(store, meta) {
    // Apply the column definitions to the Grid
    grid.reconfigure(store, meta.columns);
});