array of data as model property in extjs

1
votes

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.

2
javascriptextjsextjs4
You can create your own Ext.data.Types and convert your custom data. – A1rPun
You need to elaborate your question; what is stored within this array and how do you want to display it in your grid? – sra

2 Answers

9
votes

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.

0
votes

Supposing this is the data for your model - 

{
  "id": 1,
  "name": "game",
  "levels": ["level 1", "level 2", "level 3"]
}

You can always define your model as 

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

Leaving the type empty will be interpreted as "auto" and thus no conversion will be applied to that field.

PS: Mind the trailing commas. :)