I want to display table on List with XTemplate.

[notinotinoti]

Hello, :-)

I want to display table with XTemplate.


My json data



[
{title:"Fund list", code:00001000, name:"fund 1"},
{title:"Fund list", code:00001001, name:"fund 2"},
{title:"Fund list", code:00001002, name:"fund 3"}
]



My Xtemplate



var myTpl = new Ext.XTemplate([
'<div class="listtitle"><strong>{title}</strong></div>',
'<tpl for=".">',
'<div class="jsondata">',
'<span class="code"><strong>{code}</strong></span>',
'<span class="name"> {name}</span>',
'</div>',
'</tpl>',
]);



and My List



var mylist = new Ext.List({
itemSelector: 'div.jsondata',
singleSelect: true,
tpl: myTpl
});




Current result is like this
--------------

--------------
512 fund1
--------------
513 fund2
--------------
514 fund2
--------------

(Title text is not displayed. I don`t know why )

I want to display like this.

--------------
Fund list
--------------
512 | fund1
--------------
513 | fund2
--------------
514 | fund2
--------------

In other word, first row is list header(title)

Second, third and forth row are contents that is separated columns.


Can I display a list that I mentioned?

Then... How to write XTemplate?

[evant]

That's not how you should use it. Instead, using the grouping like in the example.

[notinotinoti]

Hm....

Where is example that you mentioned?

:-0

[evant]

The list example, see how it groups by alphabet.

[kevchuey]

Is there any way to get an Ext.List (or any other Touch Component) that has columns? I have a data set that isn't groupable like the above example.

The list I was hoping to create would look something like this:
------------------
Fund | Amount | Amount 2
------------------
512 | 5.00 | 6.11
------------------
513 | 434.21 | 4.44
------------------
514 | 123.22 | 123.55
------------------