Hybrid View
-
25 Jun 2012 11:03 AM #1
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
-
5 Jul 2012 7:19 AM #2
-
13 Jul 2012 6:50 AM #3
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.


Reply With Quote