1. #1
    Ext User
    Join Date
    Oct 2007
    Location
    Hong Kong
    Posts
    6
    Vote Rating
    0
    VanillaBean is on a distinguished road

      0  

    Default combo with multiple columns in listview

    combo with multiple columns in listview


    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

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


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

  3. #3
    Ext User
    Join Date
    Oct 2007
    Location
    Hong Kong
    Posts
    6
    Vote Rating
    0
    VanillaBean is on a distinguished road

      0  

    Default


    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?

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    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.

  5. #5
    Ext User
    Join Date
    Oct 2007
    Location
    Hong Kong
    Posts
    6
    Vote Rating
    0
    VanillaBean is on a distinguished road

      0  

    Default


    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>");
    }
    }

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    Good work!

Thread Participants: 1