PDA

View Full Version : [solved] XTemplate and DataView question



blowfish
29 Jun 2009, 12:37 AM
I'm new to ExtJs and still learning.

ExtJs doc contains the following example for XTemplate:



var data = {
name: 'Jack Slocum',
title: 'Lead Developer',
company: 'Ext JS, LLC',
...
kids: [{
name: 'Sara Grace',
age:3
},{
name: 'Zachary',
age:2
}...]
};

var tpl = new Ext.XTemplate(
'<p>Name: {name}</p>',
'<p>Title: {title}</p>',
'<p>Company: {company}</p>',
'<p>Kids: ',
'<tpl for="kids">',
'<p>{name}</p>',
'</tpl></p>'
);

tpl.overwrite(panel.body, data);
Could someone post sample code to create a data Store which consumes the above (JSON) data format? So that I can create a DataView which uses the above XTemplate. (This seems to be a simple and common scenario for DataView, however I didn't find any obvious solution for it. Is a custom "convert" function for creating the data Record a way to go?)

Thanks for your help!

blowfish
29 Jun 2009, 9:10 PM
Any idea out there? Thx!

danh2000
29 Jun 2009, 9:30 PM
It depends what you expect to do with the 'kids' data - you cannot store all of that nested data in a single record format and display it unless you flatten the 'kids' array somehow.

Additionally what do you want to do when you get the data to the dataview as it requires a node per record - how do you want to handle kids in the display?

You would probably be better to have a store and dataview that handled the name, title, company etc, then lookup the kids when a node in the view is selected.

blowfish
30 Jun 2009, 9:12 PM
Thanks for confirming that this is not a targeted scenario for DataView, and that I didn't miss anything obvious.

I was mainly looking for a way to include a custom segment with non-flat data, and didn't plan to use the built-in selection model of DataView. Again, I haven't played much with the DataView event-handling mechanism yet. Thanks for keeping me on the right track.

Animal
30 Jun 2009, 11:33 PM
It is possible.

If you need a Field which is an Array, you can use a convert function in the Field specification.

Then the XTemplate would iterate over it using a subtemplate:



<tpl for="arrayFieldName">
...
</tpl>


The best thing to do in these situations is experiment with XTemplate on the Firebug command line formatting an Array using a subtemplate, then apply what you learn to creating a DataView.

blowfish
2 Jul 2009, 12:42 AM
Thanks! So a custom "convert" function is the way to go :), as I originally suspected. And it turns out to be fairly easy!

As my simple test, the following DataView works fine with the example XTemplate:



var dataView = new Ext.DataView({
tpl:tpl,
store:new Ext.data.ArrayStore({
fields:[
'name',
'title',
'company',
{
name:'kids',
convert:function(v) {
var r = []
for (var i = 0; i < v.length; i++) {
r.push({name:v[i][0],age:v[i][1]})
}
return r
}
}
],
data:[
['Jack Slocum', 'Lead Developer', 'Ext JS, LLC',
[
['Sara Grace',3],
['Zachary',2]
]
]
]
}),
itemSelector:'*'
});
I can serve nested data to a DataView now. How nice!

Animal
2 Jul 2009, 12:44 AM
You need to fix your itemSelector there!

blowfish
2 Jul 2009, 12:54 AM
Yes, before I can handle event I guess. Probably sth. like the following so that I can listen on events on any element I'd like.
itemSelector:'.clickable'

Animal
2 Jul 2009, 1:26 AM
It depends on your template.

It should specify a DomQuery selector that will identify an Element associated with a Record.