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

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

基本上，该方法只会给您提供如下内容：

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

（来源：）

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

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

---

更新：SKU应为一列，attr数组的每个v应为一列

---

更新：我正试图借助您的答案设置一个sencha小提琴

app.js（第2版）

错误消息：

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

---

更新： 使用上次编辑的sra中发布的代码段。谢谢大家!

---

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

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

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

包含所有这些属性的初始读取器配置可能如下所示（“字段”将包含在模型定义中，未显示）：

如果要传递的响应对象包含与上面最初定义的属性不同的属性，则可以使用元数据属性动态重新配置读取器。例如：

{
    "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'
    }
}

您还可以将所需的任何其他任意数据放入元数据属性中，该属性将被读取器忽略，但可以通过读取器的元数据属性访问（该属性也通过代理的元更改事件传递给侦听器（也由存储转发）。然后，应用程序代码可以选择任何方式处理传递的元数据

如何使用该方法的一个简单示例是自定义绑定到网格的模型的字段。通过传递fields属性，该模型将由读取器内部自动更新，但除非同时更新列配置，否则该更改不会自动反映在网格中。您可以这样做y、 或者，您可以简单地将标准网格列配置对象作为元数据属性的一部分传递给网格，然后将其传递给网格。下面是一个非常简单的示例，说明如何实现这一点：

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

读取器将自动读取meta fields配置并基于新字段重建模型，但要处理新列配置，您需要在应用程序代码中处理元数据。通过在存储或代理上处理metachange事件，这一点非常简单，例如：

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

---

这是基础。现在，您的数据结构的详细信息：

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

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

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发布

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

---

编辑：

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

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

这是我用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);
});

---

编辑：

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

Ext.data.Types.DYNAMIC={
转换：函数（值、记录）{
对于（变量i=0，ln=value.length；i

基于您的示例文档，什么样的结构适合剑道网格？我知道如何在ExtJS 5中做到这一点，但我需要知道您希望如何可视化数据结构？例如，它是否必须是平面的？（即attr合并到与类型和SKU相同的级别）或者类似于此处（展开行）：这个例子看起来很有趣。对于这个特定的用例，它可以在同一个级别上。SKU应该是一列，attr数组的每个v应该是一列。谢谢，它看起来非常全面。这正是我所寻找的。这与我想要展示的非常相似。只为了记录，你可以创建

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

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