1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    4
    Vote Rating
    0
    sukina is on a distinguished road

      0  

    Default How to add a template to tooltip?

    How to add a template to tooltip?


    Earlier, I posted this same post in the Examples and Extras section. i realized that's the wrong section to post. Sorry for the duplicate post.

    Hi, I'm new to the Ext library. So, I would appreciate if I can get a little help here. For a current project, I need to display some information on a tooltip. But our PM asks that the data be display in a table format. So, there's 7 columns to show the different data. Now, those data are dynamically generated. I was told I should use a template to handle all the formatting. The question is, how do I add the template to the tooltip?



    Thanks,
    Suk

  2. #2
    Sencha User
    Join Date
    Nov 2011
    Posts
    4
    Vote Rating
    0
    sukina is on a distinguished road

      0  

    Default


    Ok, I figured it out. Thanks.

  3. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,998
    Vote Rating
    456
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Ok, I figured it out. Thanks.
    Please post your solution so others may benefit.

    Scott.

  4. #4
    Sencha User
    Join Date
    Jul 2011
    Location
    Pakistan
    Posts
    82
    Vote Rating
    2
    zonaib is on a distinguished road

      0  

    Default


    Quote Originally Posted by sukina View Post
    Ok, I figured it out. Thanks.
    do you like to share it with community ?

  5. #5
    Sencha User
    Join Date
    Nov 2011
    Posts
    4
    Vote Rating
    0
    sukina is on a distinguished road

      0  

    Default


    Sorry for the late reply.

    Code:
    <a href="#" id="detailsLink">more info</a>
    
    function showDetail(){
        var data = {
            fields: [{
                    label: 'Cell 1',
                    value: 'Value 1'
                },{
                    label: 'Cell 2',
                    value: 'Value 2'
                }, 
                ...
                {
                   label: 'Cell 5',
                    value: 'Value 5'
                }]
        };
        var tpl = new Ext.XTemplate(
            '<table class="tooltipTable" cellspacing=0>',
                '<thead><tr>',
                '<tpl for=".">',       
                    '<th>{label}</th>',  
                '</tpl></tr></thead>',
                '<tbody><tr>',
                '<tpl for=".">',       
                    '<td>{value}</td>',  
                '</tpl></tr></tbody>',
                '</table>'
        );
        var tip = new Ext.ToolTip({
                 title: data.desc,
                 target: "detailsLink",
                 delegate: 'detailsLink',
                 bodyCssClass: "tooltipTable",
                 trackMouse: true,        
                 bodyBorder: true,
                 autoWidth: true,
                 autoHeight: true,
                 renderTo: document.body
        });
        tpl.overwrite(tip.body, data.fields);
    }

  6. #6
    Sencha User
    Join Date
    Jul 2011
    Location
    Pakistan
    Posts
    82
    Vote Rating
    2
    zonaib is on a distinguished road

      0  

    Default


    really appreciate that ... its solved my problem

Thread Participants: 2