PDA

View Full Version : Toolbar doesn't display tooltips in second tab of a tab panel.



JIWAYDEF4
3 Nov 2011, 12:27 AM
Hello,

I use a tab panel with two panels inside it; these panels have a toolbar and I want to display tooltip when mouse is hover buttons. The tooltip is displayed on the first tab, but it can't be displayed on the second tab with the same code.
This code has been tested with ExtJs 4.0.2a, ExtJs 4.0.7 with Firefox 7 and Chrome 15; always the same problem.



<html>
<head>
<title>Hello Ext</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="app.css">
<script type="text/javascript" src="extjs/ext-all.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>




Ext.onReady(function(){

Ext.QuickTips.init();

Ext.create("Ext.tab.Panel", {
title: "TAB PANEL",
width: 800, height: 500,
renderTo: Ext.getBody(),
items: [{
title: "FIRST TAB",
tbar: [{
xtype: 'buttongroup',
columns: 1,
title: 'buttons',
items: [{
id: "btnOne",
text: '-ONE-',
scale: 'large',
rowspan: 3, iconCls: 'add',
iconAlign: 'top',
cls: 'x-btn-as-arrow'
}]
}]
},{
title: "SECOND TAB",
tbar: [{
id: "btnTwo",
xtype: 'buttongroup',
columns: 1,
title: 'buttons',
items: [{
text: '-TWO-',
scale: 'large',
rowspan: 3, iconCls: 'add',
iconAlign: 'top',
cls: 'x-btn-as-arrow'
}]
}]
}]
})

Ext.create("Ext.tip.ToolTip", {
target: 'btnOne',
anchor: 'top',
html: "button one",
width: 200,
autoHide: true
});

Ext.create("Ext.tip.ToolTip", {
target: 'btnTwo',
anchor: 'top',
html: "button two",
width: 200,
autoHide: true
});
});


Thanks in advance !

mitchellsimoens
3 Nov 2011, 6:21 AM
The reason is because you didn't specify the id property on the second button but there is an easier way to do this:

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.button.Button-cfg-tooltip


Ext.create("Ext.tab.Panel", {
title: "TAB PANEL",
width: 800, height: 500,
renderTo: Ext.getBody(),
items: [{
title: "FIRST TAB",
tbar: [{
xtype: 'buttongroup',
columns: 1,
title: 'buttons',
items: [{
text: '-ONE-',
scale: 'large',
rowspan: 3, iconCls: 'add',
iconAlign: 'top',
cls: 'x-btn-as-arrow',
tooltip: 'bitton one'
}]
}]
},{
title: "SECOND TAB",
tbar: [{
id: "btnTwo",
xtype: 'buttongroup',
columns: 1,
title: 'buttons',
items: [{
text: '-TWO-',
scale: 'large',
rowspan: 3, iconCls: 'add',
iconAlign: 'top',
cls: 'x-btn-as-arrow',
tooltip : 'button two'
}]
}]
}]
});

Setting the id on a component opens you up to collisions meaning you can't have duplicate id's so I would try everything not to use them. You can use them to debug but nothing more.

JIWAYDEF4
3 Nov 2011, 6:56 AM
Thanks for your answer Mitchell!
My code was not right for the id 'btnTwo' but even if I modify it, it won't work.
I would like to customize the tooltip; this is why I need to create a new 'Ext.tip.ToolTip' object.
If you switch the first panel and the second one, it always works for the first tab.


Ext.onReady(function(){

Ext.QuickTips.init();

var firstTab = Ext.create("Ext.panel.Panel", {
title: "FIRST TAB",
tbar: [{
xtype: 'buttongroup',
columns: 1,
title: 'buttons',
items: [{
id: "btnOne",
text: '-ONE-',
scale: 'large',
rowspan: 3, iconCls: 'add',
iconAlign: 'top',
cls: 'x-btn-as-arrow',
tooltip : 'button one'
}]
}]
});

var secondTab = Ext.create("Ext.panel.Panel", {
title: "SECOND TAB",
tbar: [{
xtype: 'buttongroup',
columns: 1,
title: 'buttons',
items: [{
id: "btnTwo",
text: '-TWO-',
scale: 'large',
rowspan: 3, iconCls: 'add',
iconAlign: 'top',
cls: 'x-btn-as-arrow',
tooltip : 'button two'
}]
}]
});

Ext.create("Ext.tab.Panel", {
title: "TAB PANEL",
width: 800, height: 200,
renderTo: Ext.getBody(),
items: [secondTab, firstTab]
})

Ext.create("Ext.tip.ToolTip", {
target: 'btnOne',
anchor: 'top',
html: "button one",
width: 200,
autoHide: true
});

Ext.create("Ext.tip.ToolTip", {
target: 'btnTwo',
anchor: 'top',
html: "button two",
width: 200,
autoHide: true
});
});

mitchellsimoens
3 Nov 2011, 7:09 AM
The tooltip config on the Button accepts a config Object that you would pass to Ext.tip.QuickTip

JIWAYDEF4
3 Nov 2011, 8:09 AM
I have already tried the tooltip config object; do you know why it doesn't seem to take care of my config object (customization)?
btnOne1: bad-rendered
btnOne2: OK
btnTwo1: bad-rendered
btnTwo2: doesn't appear


Ext.onReady(function(){

Ext.QuickTips.init();

var btnConfig = {
scale: 'medium',
anchor: "top",
style: {marginRight: '10px'},
title: 'Mouse Track',
width: 200,
html: 'This tip will follow the mouse while it is over the element'
};

var firstTab = Ext.create("Ext.panel.Panel", {
title: "FIRST TAB",
tbar: [{
xtype: 'buttongroup',
columns: 2,
title: 'buttons',
items: [{
id: "btnOne1", text: 'btnOne1', scale: 'large',
rowspan: 3, iconCls: 'add', iconAlign: 'top', cls: 'x-btn-as-arrow',
tooltip : btnConfig
},{
id: "btnOne2", text: 'btnOne2', scale: 'large',
rowspan: 3, iconCls: 'add', iconAlign: 'top', cls: 'x-btn-as-arrow'
}]
}]
});

var secondTab = Ext.create("Ext.panel.Panel", {
title: "SECOND TAB",
tbar: [{
xtype: 'buttongroup',
columns: 2,
title: 'buttons',
items: [{
id: "btnTwo1", text: 'btnTwo1', scale: 'large',
rowspan: 3, iconCls: 'add', iconAlign: 'top', cls: 'x-btn-as-arrow',
tooltip : btnConfig
}, {
id: "btnTwo2", text: 'btnTwo2', scale: 'large',
rowspan: 3, iconCls: 'add', iconAlign: 'top', cls: 'x-btn-as-arrow'
}]
}]
});

Ext.create("Ext.tab.Panel", {
title: "TAB PANEL",
width: 800, height: 200,
renderTo: Ext.getBody(),
items: [firstTab, secondTab]
})

Ext.create("Ext.tip.ToolTip", Ext.apply({target: 'btnOne2'},btnConfig));
Ext.create("Ext.tip.ToolTip", Ext.apply({target: 'btnTwo2'},btnConfig));

});

mitchellsimoens
3 Nov 2011, 8:22 AM
The reason the one doesn't appear is because the tab isn't rendered until you click on the tab.

JIWAYDEF4
3 Nov 2011, 8:31 AM
Of course, you're right! :)
Thanks a lot Mitchell.


Ext.onReady(function(){

Ext.QuickTips.init();

var btnConfig = {
scale: 'medium',
anchor: "top",
style: {marginRight: '10px'},
title: 'Mouse Track',
width: 200,
html: 'This tip will follow the mouse while it is over the element'
};

var firstTab = Ext.create("Ext.panel.Panel", {
title: "FIRST TAB",
tbar: [{
xtype: 'buttongroup',
columns: 2,
title: 'buttons',
items: [{
id: "btnOne1", text: 'btnOne1', scale: 'large',
rowspan: 3, iconCls: 'add', iconAlign: 'top', cls: 'x-btn-as-arrow',
tooltip : btnConfig
},{
id: "btnOne2", text: 'btnOne2', scale: 'large',
rowspan: 3, iconCls: 'add', iconAlign: 'top', cls: 'x-btn-as-arrow'
}]
}]
});

var secondTab = Ext.create("Ext.panel.Panel", {
title: "SECOND TAB",
tbar: [{
xtype: 'buttongroup',
columns: 2,
title: 'buttons',
items: [{
id: "btnTwo1", text: 'btnTwo1', scale: 'large',
rowspan: 3, iconCls: 'add', iconAlign: 'top', cls: 'x-btn-as-arrow',
tooltip : btnConfig
}, {
id: "btnTwo2", text: 'btnTwo2', scale: 'large',
rowspan: 3, iconCls: 'add', iconAlign: 'top', cls: 'x-btn-as-arrow'
}]
}],
listeners: {
afterrender: {
fn: function(){
console.log("panel 2 rendered");
Ext.create("Ext.tip.ToolTip", Ext.apply({target: 'btnTwo2'},btnConfig));
}
}
}
});

Ext.create("Ext.tab.Panel", {
title: "TAB PANEL",
width: 800, height: 200,
renderTo: Ext.getBody(),
items: [firstTab, secondTab]
})

Ext.create("Ext.tip.ToolTip", Ext.apply({target: 'btnOne2'},btnConfig));

});