PDA

View Full Version : custom tool tips xtype is not working for bar chart.



shwetapro
3 Oct 2012, 2:36 AM
Hi

I am trying to apply the custom tool tips to bar chart through xtype.

First i defined the tool tip :


Ext.define('ToolTip1',{
extend:'Ext.tip.ToolTip',
alias: 'widget.ToolTip1',

constructor: function()
{

},


trackMouse:true,
width:140,
height:28,
style:'border-color: #ffffff;border:50;background-color: #0078AE;',
html:'fgeh',
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('Investment') + ' views');
}

});



then i created the object of above class

var toolTip = Ext.create('ToolTip1');


then i gave this object to my chart and its working fine.


var chart1 = Ext.create('Ext.chart.Chart', {
..
..
series: [{
..
tips:toolTip,
..
}]
..
..
})



Now the issue is when i gave the xtype of my custom tooltip in tips config instead of directly giving the object, when i did this tool tip time came blank..


var chart1 = Ext.create('Ext.chart.Chart', {
..
..
series: [{
..
tips:{xtype:ToolTip1},



The reason for this approch is I want to resue the tool tip for different charts.

the whole code looks like this.

Ext.onReady(function () {

Ext.tip.QuickTipManager.init();


Ext.define('ToolTip1',{
extend:'Ext.tip.ToolTip',
alias: 'widget.ToolTip1',

constructor: function()
{

},


trackMouse:true,
width:140,
height:28,
style:'border-color: #ffffff;border:50;background-color: #0078AE;',
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('Investment') + ' views');
}

});

var m = Ext.create('ToolTip1');

var store = Ext.create('Ext.data.JsonStore', {
fields: ['Investment','name'],
data: [
{'Investment': -100,name: "Jul 7"},
{'Investment': 300,name: "Jul 14"},
{'Investment': 200,name: "Jul 21"},
{'Investment': 400,name: "Jul 28"},
{'Investment': 500,name: "Aug 07"},
{'Investment': 200,name: "Aug 14"},
{'Investment': 300,name: "Aug 21"},
{'Investment': 200,name: "Aug 28"},
{'Investment': 300,name: "Sep 07"},
{'Investment': 200,name: "Sep 14"},
{'Investment': 400,name: "Sep 21"},
{'Investment': 100,name: "Sep 28"},
]
});





var chart1 = Ext.create('Ext.chart.Chart', {
height:500,
width:500,
renderTo: 'div3',
id: 'chartCmp1',
xtype: 'chart',
insetPadding: 25,
//theme: 'Browser:gradients',
shadow:true,
style: 'background:#fff',
animate: true,
shadow: true,
gutter:50,
store: store,
axes: [{
type: 'Numeric',
position: 'left',
axisStroke: '#FFF',
fields: ['Investment'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
maximum:500,
minimum:-500
}, {
type: 'Category',
position: 'bottom',
fields: ['name']
}],
series: [{
type: 'column',
axis: 'left',
gutter: 5,
highlight: true,
tips:{xtype:ToolTip1},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'Investment',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: ['Investment'],
label: {
display: 'insideEnd',
field: 'name',
//renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#FFF',
'text-anchor': 'right'
}


}],
legend: {
boxStroke: '#FFF',
position: 'top left'

}
});



});

mitchellsimoens
10 Oct 2012, 8:50 AM
That's because Ext.chart.Tip will create Ext.tip.ToolTip always

shwetapro
10 Oct 2012, 8:09 PM
does it mean we can't give the tool tip by xtype in chart?

mitchellsimoens
11 Oct 2012, 3:27 AM
unfortunately yes, not unless you override the constructor which there is lot of other things going on in there.

shwetapro
11 Oct 2012, 9:41 PM
Thanks Mitchell. :)