PDA

View Full Version : access associated data in XTemplate



dedoz
7 Jun 2012, 3:25 AM
I have 2 models and 2 stores defined.
Model A has many Model B.
I can load A's and display them using console.log(), also can display associated B's for each A using A model getters.

how can i do the same with XTemplate?
I can display A values using XTemplates, theres alot examples doing that, also theres examples displaying associated arrays but didnt find one example displaying associated models, associated using Ext.data.associations


someA.B().getAt(0).get('name'); // displays first B name thats associated to this A.

how can i do the same inside a template for XTemplate?
something like


'<tpl for=".">',
<p>{name}</p> // this could be A name
'<tpl for="B">', // iterating over B's ???
'<p>{name}</p>', // this could be associated B name
'</tpl>',
'</tpl>'

mitchellsimoens
11 Jun 2012, 6:55 AM
You would need to build the data structure manually so that you would have a B property that is an array. Associations won't work in XTemplate like that at all.

cyb3rjithu
28 Jan 2014, 11:08 PM
You would need to build the data structure manually so that you would have a B property that is an array. Associations won't work in XTemplate like that at all.

can you please share me some working example to solve the probleM?

cyb3rjithu
30 Jan 2014, 5:12 AM
You would need to build the data structure manually so that you would have a B property that is an array. Associations won't work in XTemplate like that at all.


how can we build that dtata structure manually ???

acteon
31 Jan 2014, 10:19 AM
http://jsfiddle.net/acteon/d7Dxe/1/ (http://jsfiddle.net/VG6FR/2/) code ise there
or below both the same. The point is that you can define and use functions in XTemplate scope. For each loop scope you can use values to reach current iterating object

/**
baba means father
šocuklar means children
in my native language
*/




Ext.define("Kid", {
extend: 'Ext.data.Model',
fields: [{
name: 'name',
type: 'string'
}, {
name: 'age',
type: 'int'
}]
});


Ext.define("Father", {
extend: 'Ext.data.Model',
fields: [{
name: 'name',
type: 'string'
}],
hasMany: {
model: 'Kid',
name: 'kids'
}
});


var data = [{
name: 'Don Griffin',
kids: [{
name: 'Aubrey ',
age: 17
}, {
name: 'Joshua',
age: 13
}, {
name: 'Cale',
age: 10
}, {
name: 'Nikol',
age: 5
}, {
name: 'Solomon',
age: 0
}]
}, {
name: 'Don Griffin 2',
kids: [{
name: 'Aubrey 2',
age: 17
}, {
name: 'Joshua 2',
age: 13
}, {
name: 'Cale 2',
age: 10
}, {
name: 'Nikol 2',
age: 5
}, {
name: 'Solomon 2',
age: 0
}]
}, {
name: 'Don Griffin 3',
kids: [{
name: 'Aubrey 3',
age: 17
}, {
name: 'Joshua 3',
age: 13
}, {
name: 'Cale 3',
age: 10
}, {
name: 'Nikol 3',
age: 5
}, {
name: 'Solomon 3',
age: 0
}]
}];




var fatherStore = Ext.create('Ext.data.Store', {
model: 'Father',
data: data,
proxy: {
type: 'memory',
reader: {
type: 'json'
}
}
});




var tpl = new Ext.XTemplate('<tpl for=".">',
"baba {[values.get('name')]}\n",
'\t šocuklar {[values.kids().getCount()]} :\n',
'<tpl for="this.getMyKids(values)">',
"\t\t{[values.get('name')]}\n",
'</tpl>',
'</tpl>', {
getMyKids: function (values) {
console.debug("getMyKids cout :" + values.kids().data.items.length);
return values.kids().data.items;


}
});
Ext.get("outDiv").setHTML(tpl.apply(fatherStore.data.items));