Question

我尝试在原型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小提琴。

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的最后一次编辑中发布的片段。谢谢！

Ext JS 5

Answer 1

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

Response MetaData

除记录数据外，服务器还可以在其响应中返回元数据，这些元数据描述数据集本身的属性或用于重新配置Reader。要在响应中传递元数据，只需将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配置可能如下所示（＆＃34;字段＆＃34;将包含在模型定义中，未显示）：

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": "ed@sencha.com"
    }],
    "metaData": {
        "root": "users",
        "totalProperty": 'count',
        "successProperty": 'ok',
        "messageProperty": 'msg'
    }
}

您还可以将所需的任何其他任意数据放入metaData属性中，这将被Reader忽略，但可以通过Reader的metaData属性访问（也可以通过代理传递给侦听器＆＃39） ; s metachange事件（也由商店中继）。应用程序代码然后可以以它选择的任何方式处理传递的元数据。

如何使用它的一个简单示例是自定义绑定到网格的模型的字段。通过传递fields属性，Reader将在内部自动更新Model，但除非您还更新列配置，否则该更改不会自动反映在网格中。您可以手动执行此操作，也可以将标准网格列配置对象作为metaData属性的一部分传递，然后将其传递给网格。这是一个非常简单的例子，说明如何实现：

// 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" }
        ]
    }
}

Reader会自动读取元字段配置并根据新字段重建模型，但要处理新列配置，您需要处理应用程序代码中的元数据。通过在商店或代理上处理metachange事件就足够了，例如：

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
}

我们可以发布基本字段（和列（未显示）） - 但我们并不需要因为metachange可以处理所有这些

{ 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() }

所有领域＆amp;以下列由服务器使用metachange

发布

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

动态属性（嵌套）用作ExtJS中的网格列

1 个答案: