PDA

View Full Version : combo with multiple columns in listview



VanillaBean
7 Sep 2009, 1:11 AM
Hi,

I've searched the forums for an example of this, but haven't found an obvious example.

I want to implement a combo that displays dropdown data in its listview as multiple columns. I'm naively thinking its just a matter of setting up a template that can render a table and its rows, but I'm not sure how to do even that. Specifically, I'm not sure where to place the table and column header markup in the template vs. the markup that's needed for each row.

If there's an even better way for doing this, for example a way to render columns that are resizable, I'd appreciate any tips.

Thanks, Dean

Animal
7 Sep 2009, 1:13 AM
Use an XTemplate of your own devising. Possibly using a <table>

VanillaBean
7 Sep 2009, 1:16 AM
Hi Animal,

In the XTemplate, how do I specify the table markup that gets generated once vs. the row markup that gets generated for every, well ... row of data?

Animal
7 Sep 2009, 1:44 AM
Look at the tpl that exists in ComboBiox, and read the XTemplate docs. After reading the docs, you will be able to see The existing one looping over the Records.

So you will have your '<table><tbody>' outside the loop, and a '<tr......>....</tr>' inside the loop.

VanillaBean
7 Sep 2009, 2:54 AM
Thanks Animal!

Below is what I came up with. With a bit of CSS it will look OK.

tpl:new Ext.XTemplate(
'<table><tbody>',
'<tr><th>Company</th><th>Reuters</th><th>Bloomberg</th><th>Articles</th></tr>',
'<tpl for=".">',
'<tr class="x-combo-list-item">',
'<td class="name">{[this.highlight(values.name)]}</td>',
'<td class="ticker">{[this.highlight(values.bloomberg_ticker)]}</td>',
'<td class="ticker">{[this.highlight(values.reuters_ticker)]}</td>',
'<td class="articles_count">{articles_count}</td>',
'</tr>',
'</tpl>',
'</tbody></table>',

{
highlight : function(value) {
return value.replace(/\[/,"<em>").replace(/\]/,"</em>");
}
}

Animal
7 Sep 2009, 4:16 AM
Good work!