PDA

View Full Version : unable to display data from nested store/model



afidalgo
26 Mar 2014, 6:34 PM
Hello, im trying to display nested data on two different grids.

this is the json that im getting from the backend


{"balancers":[{"name":"test","members":[{"gw":"foo1","score":"1"},{"gw":"foo2","score":"9"}]},{"name":"bal2","members":[{"gw":"2foo1","score":"1"},{"gw":"2foo2","score":"9"}]}],"msg":null,"total":2,"success":true}

Then i have the models


Ext.define('sfe.model.Balancer', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'}
],
idProperty: 'name',
associations: [
{ type: 'hasMany', model: 'sfe.model.BalancerMember', name: 'members'}
]
});



Ext.define('sfe.model.BalancerMember', {
extend: 'Ext.data.Model',
fields: [
{name: 'gw', type: 'string'},
{name: 'score', type: 'int'}
], belongsTo: 'sfe.model.Balancer'
});


and this is my store


Ext.define('sfe.store.Balancers', {
extend: 'Ext.data.Store',
model: 'sfe.model.Balancer',
autoLoad: false,
proxy: {
type: 'ajax',
api: {
create: 'resources/php/balancers.php?a=create',
destroy: 'resources/php/balancers.php?a=delete',
read: 'resources/php/balancers.php',
update: 'resources/php/balancers.php?a=update'
},
reader: {
type: 'json',
totalProperty: 'total',
root: 'balancers'
}
}
});

on my first grid im able to display both balancers (i can see test and bal2), then on my second grid, on grid one click, for example on "test" i want to see and edit the members for this balancer.
im not able even to display members.

this is the grid that i have not info at all displayed


Ext.define('sfe.view.BalancerMembers',{
extend: 'Ext.panel.Panel',
title: 'GW por balanceador',
border: 0,
alias: 'widget.BalancerMembers',
layout: 'fit',
closable: true,
initComponent: function()
{
this.title = 'GW por balanceador '+this.cname;
var myStore = Ext.StoreManager.lookup("Balancers");

myStore.load(
{
callback: function()
{
var balancers = myStore.getAt(1);
console.log(balancers);
console.log(balancers.get('name'));
console.log(balancers.members().getAt(0).get('gw'));
// //iterate over the Orders for each User
// balancers.members().each(function(member) {
// console.log(member.raw.gw);
// });


}
});

this.items = [
{
xtype: 'gridpanel',
border: 0,
store: myStore,
tbar: [
{
xtype: 'button',
text: 'Aplicar cambios',
icon: 'resources/images/check.png',
handler: function(grid, rowIndex, colIndex) {
myStore.sync();
}
},
{
xtype: 'button',
text: 'Refrescar',
icon: 'resources/images/play.png',
handler: function()
{
myStore.load();
}
}
],
columns: [
{text: 'gw', dataIndex: 'members.gw'},
{text: 'score', dataIndex: 'members.score'}
],
plugins: [{ptype: 'cellediting', clicksToEdit: 1}]
}
];
this.callParent(arguments);
}
});

Zinnia
27 Mar 2014, 1:12 AM
Check the below example, Hope this may help you.

http://jsfiddle.net/alexrom7/rF8mt/2/

afidalgo
27 Mar 2014, 4:19 AM
Thanks, perfect.

afidalgo
27 Mar 2014, 4:23 AM
sorry, what's the proper way to update this data?