PDA

View Full Version : [3.0.3]How to render a panel into a tabpanel hidden ?


dtex-lab
5 Nov 2009, 6:21 AM
Hi

I want render a panel in a tabpanel hidden... but I'm not able.

I try to add the hidden property to the panel, but it doesn't works.

The only way I found it after the tab panel rendered.. call the function hideTabStripItem



<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=UTF-8' />
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="lib/extjs/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="lib/extjs/ext-all-debug.js"></script>
<script>
Ext.onReady(function () {
var vObjectFields1 = new Array();
var vObjectFields2 = new Array();
for (var x = 0; x < 10; x++) {
vObjectFields1.push(new Ext.form.TextField({
allowBlank: true,
fieldLabel: 'Tab 1 field -' + x
}));
vObjectFields2.push(new Ext.form.TextField({
allowBlank: true,
fieldLabel: 'Tab 2 field -' + x
}));
}
var vPanel1 = new Ext.Panel({
layout: 'form',
title: 'Panel 1',
items: vObjectFields1
});
var vPanel2 = new Ext.Panel({
layout: 'form',
title: 'Panel 2',
hidden: true,
items: vObjectFields2
});
var vToolbar = new Ext.Toolbar({
items: {
xtype: 'tbbutton',
cls: 'x-btn-icon',
text: 'hide tab',
handler: function (aButton, aEvent) // FIXME
{
aButton.ownerCt.ownerCt.hideTabStripItem(1);
}
}
});
var vTabPanel = new Ext.TabPanel({
region: 'center',
tbar: vToolbar,
activeTab: 0,
items: [vPanel1, vPanel2]
});
var vView = new Ext.Viewport({
layout: 'border',
items: vTabPanel
});
})
</script>
</head>
</body>
</body>
</html>


Ad you can see in my example, the Tab Panel 2 should be hidden when the tabpanel is rendered.. I add the Hidden : true properties..
But it seems not used by ExtJS.

There is a bug ? or ExtJS doesn't have this feature ? Or how can I do it without use an after render event ?
If ExtJs doesn't have this feature I will appreciate if it will be implemented..
I believe the hidden properies will be great

Thanks
jsakalos
5 Nov 2009, 1:16 PM
You could also create tab panel w/o the hidden tab and add it only when it is needed.
dtex-lab
5 Nov 2009, 11:17 PM
I could not add the panel later. It is not so simple in my generic framework...
Condor
6 Nov 2009, 6:21 AM
How about a 'hideTab' config option?

Ext.override(Ext.TabPanel, {
initTab : Ext.TabPanel.prototype.initTab.createSequence(function(item, index){
if(item.hideTab){
item.tabEl.style.display = 'none';
}
})
});
dtex-lab
6 Nov 2009, 7:02 AM
Hi Condor
Ty! Great!!

A little explaination...
you wrote
'hideTab' config .
hideTab is a function .. not a property.. right ?

In your example you check the item.hideTab property..
but I haven't found it in the DOC... Is is a new one created by you for my example?


if(item.hideTab){

I change it in order to use the "hidden" property



Ext.override(Ext.TabPanel, {
initTab : Ext.TabPanel.prototype.initTab.createSequence(function(item, index){
if(item.hidden == true){
item.tabEl.style.display = 'none';
}
})
});

Why this very simple implementation is not standard ?
"hidden" is already available for Panel....

SHould I open a new feature request ?
Thanks
Condor
6 Nov 2009, 7:09 AM
You can't use the panel 'hidden' property, because the tabpanel already uses this to hide the inactive tabs.

That is why I choose a different name ('hideTab'). Maybe 'tabHidden' would be better (doesn't sound like a function).
aicom
20 May 2011, 3:53 AM
I've tried your override and works fine. I'd like to know how to show again the hidden tab.


var tp = Ext.getCmp('mytabpanelID');
var tab = Ext.getCmp('myhiddentabID');
tp.add(tab); // does nothing
tab.show(); //does nothing
tp.setActiveTab(tab); //activates the panel but without tab
jsakalos
20 May 2011, 7:42 AM
I'd say it should be reversed override. Something like:



tab.tabEl.style.display = ''; // or 'block'
aicom
22 May 2011, 11:09 PM
thank you. finally I've added the tab programmatically. the reason of rendering it hidden was because of the order of the tabs. if I add it, it's the last tab so I wanted to see the tab next to another one instead of the last one.
Is there any wany to add a tab in a determinate order?
jsakalos
22 May 2011, 11:16 PM
Yes, tab.Panel (http://docs.sencha.com/ext-js/4-0/#/api/Ext.tab.Panel) has insert method where you can specify at which index you want to insert the tab.