Load substore in a Grid

[sirkis]

Hello

I have an association in my store, i want to load subdata in a grid.

My models

Ext.define('Zone', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name'],
    hasMany  : {model: 'RefItemZone', name: 'refItems', associationKey:'refItems'}
});

Ext.define('RefItemZone', {
    extend: 'Ext.data.Model',
    fields: ['link'],
    belongsTo: 'Zone'
});

My grid

var grid = Ext.create('Ext.grid.Panel', {
        renderTo: document.body,
        plugins: [rowEditing],
        width: '100%',
        height: window.innerHeight,
        frame: true,
        title: 'Zones',
        store: store,
        collapsible: true,
        columns: [{
            text: 'ID',
            width: 40,
            sortable: true,
            dataIndex: 'id'
        }, {
            text: 'Nom',
            flex: 1,
            sortable: true,
            dataIndex: 'name',
            field: {
                xtype: 'textfield'
            }
        },{
            text: 'Component',
            flex: 1,
            sortable: true,
            dataIndex: 'SOMETHING THERE',
            field: {
                xtype: 'textfield'
            }
        }]
});

Thank for your help

[mitchellsimoens]

You cannot have two different stores on a grid. The only thing that you can do is when the hasMany store has data, update the record on the main store but that's messy.

[sirkis]

Ok but i have only one store with sub store in it.

var store = Ext.create('Ext.data.Store', {
        autoLoad: true,
        autoSync: true,
        sorters: 'id',
        groupField: 'name',
        model: 'Zone',
        proxy: {
            type: 'rest',
            url: '/rest/zones',
            reader: {
                type: 'json'
            },
            writer: {
                type: 'json'
            }
        }
    });

Capture-1.png

[mitchellsimoens]

I see... you will need to use a renderer in that case. dataIndex should be the first level key in the record.data Object and then the renderer, the first argument will be the value of that key... you can then traverse down that and return what you want to be displayed. If you need something included in the record, the record is passed as the 3rd argument i believe.

[sirkis]

Ok Thanks !

Do you have an example of this ?

[flanders]

There are some in the docs for Column and grid.Panel (http://docs.sencha.com/ext-js/4-0/#!....column.Column)

An other example:

render: function(value, metaData, record) {
return value + ' ' + record.get('anythingElse');
}