array of data as model property in extjs

Question

I have a model in extjs like this:

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

I want to use this model for a grid store,but its third property

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

is an array of data which i want to show them in dynamically created columns of my grid. I think maybe associations on extjs model may bring me a solution but i'm confused how to use them.any solution will be appriciated.

Answer 1

Just use the type: 'auto' setting and your array will be untouched.

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

And then you could define your columns with renderers like so:

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

If you wanted to dynamically add columns by items in the array, you would actually have to figure out which record has the array with the most items in it and then add as many columns as you needed to the column array and then set the grid's columns with the .configure method. This could probably be done on the store's load event.