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?


    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 - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    8,935
    Vote Rating
    443
    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  

  3. #3
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      1  

    Default


    Hi sukina,
    I am defining a example below that shows the tooltip on the button. The tooltip contains a table of two columns. Just define the data according to your need & youcan also customize table according to your need.

    Code:
    var btn = Ext.create('Ext.Button', {
        text: 'Click me',
        renderTo: Ext.getBody(),
        handler: function() {
            alert('You clicked the button!');
        }
    });
    var tip = Ext.create('Ext.tip.ToolTip', {
        target: btn .el.id,
        layout: 'fit',
        items:{
            xtype: 'box'
            , data: [
                {name: 'XXX', age: '23'},
                 {name: 'YYY', age: '21'},
                 {name: 'ZZZ', age: '32'}
            ]
            , tpl: new Ext.XTemplate(
               '<table border="1" width="100" cellspacing="2" cellpadding="5">',
                  '<tpl for=".">',
                     '<tr width="50%">',
                        '<td>{name}</td><td>{age}</td>',
                     '</tr>',
                   '</tpl>',
               '</table>'
            )
        }
    });
    sword-it.com, Sencha Developer House in Turkey - Istanbul University Technopark Suite 204.

Thread Participants: 2