combo with multiple columns in listview

[VanillaBean]

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]

Use an XTemplate of your own devising. Possibly using a <table>

[VanillaBean]

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]

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]

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]

Good work!