PDA

View Full Version : Load substore in a Grid



sirkis
24 Nov 2011, 8:11 AM
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
24 Nov 2011, 8:36 AM
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
24 Nov 2011, 11:37 PM
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'
}
}
});



29567

mitchellsimoens
25 Nov 2011, 10:18 AM
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
27 Nov 2011, 1:31 AM
Ok Thanks ! :)

Do you have an example of this ?

flanders
27 Nov 2011, 5:30 AM
There are some in the docs for Column and grid.Panel (http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Column)

An other example:

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