javascript - 数据数组作为 extjs 中的模型属性

Question

我在 extjs 中有一个这样的模型:

Ext.define('Game', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'Name', type: 'string' },
        //{ name: 'levels' , type:'array'},
    ]
});

我想将此模型用于网格存储，但它的第三个属性

//{ name: 'levels' , type:'array'}

是一组数据，我想在我的网格的动态创建的列中显示它们。我想也许 extjs 模型上的关联可能会给我带来解决方案，但我对如何使用它们感到困惑。任何解决方案都会得到应用。

Answer 1

只需使用 type: 'auto' 设置，您的阵列将保持不变。

Ext.define('Game', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'Name', type: 'string' },
        { name: 'levels' , type:'auto'},
    ]
});

然后你可以像这样用渲染器定义你的列:

columns: [
    {
        text: "ID",
        dataIndex: "id"
    },
    {
        text: "Name",
        dataIndex: "Name"
    },
    {
        text: "Array Item 1",
        dataIndex: "levels",
        renderer: function(value){
             return levels[0];
        }
    },
    {
        text: "Array Item 2",
        dataIndex: "levels",
        renderer: function(value){
             return levels[1];
        }
    }
]

如果你想按数组中的项目动态添加列，你实际上必须弄清楚哪条记录中包含最多项目的数组，然后根据需要向列数组添加尽可能多的列，然后设置网格的列与 .configure 方法。这可能会在商店的加载事件中完成。