PDA

View Full Version : Required ToolTip for the Close icon in TabPanel



sharadtitan2006
9 Sep 2010, 6:22 AM
Required ToolTip, as Close, for the Close icon in TabPanel when we set , closeable: true,

Condor
9 Sep 2010, 6:31 AM
Configure the TabPanel with:

itemTpl: new Ext.Template(
'class="{cls}" id="{id}"><a class="x-tab-strip-close" ext:qtip="Close"></a>',
'<a class="x-tab-right" href="#"><em class="x-tab-left">',
'<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
'</em></a></li>'
)

sharadtitan2006
9 Sep 2010, 7:04 AM
Thanks for the reply.

Here is the code I have used in bold:
-------------------------------------

itemsArray[itemsArray.length] = {
xtype: 'tabpanel',
hideMode: 'offsets',
region: 'center',
id: 'mainiComtab',
itemTpl: new Ext.Template(
'class="{cls}" id="{id}"><a class="x-tab-strip-close" ext:qtip="Close"></a>',
'<a class="x-tab-right" href="#"><em class="x-tab-left">',
'<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
'</em></a></li>'
),
animCollapse: Ext.isIE,
layoutOnTabChange: true,
activeTab: 0,
resizeTabs: true,
tabWidth: 165,
minTabWidth: 165,
enableTabScroll: true,
animCollapse: Ext.isIE,
monitorResize: true,
monitorWindowResize: true,
fitToFrame: true,
deferredRender: false,
items:[{xtype: 'icomHomePanel'}]
};

But it is giving error javascript. Please help.

Condor
9 Sep 2010, 7:10 AM
What kind of error?

If you are using XHTML then you need to register the ext namespace, e.g.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:ext="http://www.extjs.com" xml:lang="en" lang="en">
<head>
...

sharadtitan2006
9 Sep 2010, 7:23 AM
Thanks for the reply.

The Issue I am facing now,
--------------------------

if(!this.itemTpl){
var tt = new Ext.Template(
'<li class="{cls}" id="{id}"><a class="x-tab-strip-close" onclick="return false;" ext:qtip="Close"></a>',
'<a class="x-tab-right" href="#" onclick="return false;"><em class="x-tab-left">',
'<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
'</em></a></li>'
);
tt.disableFormats = true;
tt.compile();
Ext.TabPanel.prototype.itemTpl = tt;
}
-----------------------------------------------------------
if I am adding the code in the bold, in the Library file : ext-all-debug.js it is working but not in the way I have posted to you. I am not using XHTML.

Please help.

Condor
9 Sep 2010, 7:35 AM
Apparently, you are using a different Ext version (compare the 2 templates and notice the difference).

Simply copy the template from your ext-all-debug file, add the qtip and use it as the itemTpl in your config.

ps. If you want this for all TabPanels then you could also use:

Ext.TabPanel.prototype.itemTpl = new Ext.Template(
'<li class="{cls}" id="{id}"><a class="x-tab-strip-close" onclick="return false;" ext:qtip="Close"></a>',
'<a class="x-tab-right" href="#" onclick="return false;"><em class="x-tab-left">',
'<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
'</em></a></li>',
{
disableFormats: true,
compiled: true
}
);
(put this before Ext.onReady)

sharadtitan2006
9 Sep 2010, 7:44 AM
Using the library: Ext JS Library 3.0.0
I cannot change the library file - ext-all-debug.js

Here is the code I am using, in this code I want to override itemTpl:
----------------------------------------------------------------
Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.QuickTips.getQuickTip().interceptTitles = true;
Ext.QuickTips.enable();

var itemsArray = [];
if (IcomController.icomHome.securityConfig.leftNavAllowed) {
this.navPanel = new clent.icom.NavPanel({
id: 'mainIcomWest',
region: 'west',
closable: true,
collapsible: true,
split: true
});
itemsArray[itemsArray.length] = this.navPanel;
}
itemsArray[itemsArray.length] = {
xtype: 'tabpanel',
hideMode: 'offsets',
region: 'center',
id: 'mainiComtab',
animCollapse: Ext.isIE,
layoutOnTabChange: true,
activeTab: 0,
resizeTabs: true,
tabWidth: 165,
minTabWidth: 165,
enableTabScroll: true,
animCollapse: Ext.isIE,
monitorResize: true,
monitorWindowResize: true,
fitToFrame: true,
deferredRender: false,
items:[{xtype: 'icomHomePanel'}],
listeners:{
'afterrender': function(){
if(!this.itemTpl){
alert('abcd --> ' + this.itemTpl);
var tt = new Ext.Template(
'class="{cls}" id="{id}"><a class="x-tab-strip-close" ext:qtip="Close"></a>',
'<a class="x-tab-right" href="#"><em class="x-tab-left">',
'<span class="x-tab-strip-inner"><span class="x-tab-strip-text {iconCls}">{text}</span></span>',
'</em></a></li>'
);
tt.disableFormats = true;
tt.compile();
Ext.TabPanel.prototype.itemTpl = tt;
}
}
}
};

var viewport = new Ext.Viewport({
renderTo: 'IcomHomepageDiv',
layout: 'border',
layoutConfig: {
alwaysUsePctSizes: true
},
items:itemsArray
});
});
------------------------
Here is code I have added in bold.

I am right or not I dont know, Please help.

Condor
9 Sep 2010, 7:51 AM
Your solution doesn't work, because the default itemTpl is created when the tabpanel is rendered, so it exists and is already used before the afterrender event.

I think you like the solution in post #6 best.

ps. You should be calling QuickTips.init() instead of enabled().

sharadtitan2006
9 Sep 2010, 8:28 AM
Many Many Thanks for the help it is working now.