PDA

View Full Version : Collapsible TabPanel with tabs in placeholder?



mpost
10 Oct 2013, 2:11 PM
Is there a way to have a collapsible TabPanel where the tabs become the placeholder? I tried creating a TabPanel with collapsible: true, but that gives me:

A panel header with a collapse tool
Tabs underneath the panel header
A placeholder that consists of the panel header from #1 instead of the tabs from #2
I'd combine this with tabPosition: left so I could have a set of tabs along the left edge of the screen that can slide out.

ettavolt
11 Oct 2013, 4:55 AM
How would you like to collapse and expand your panel? E.g. on click on what?

mpost
11 Oct 2013, 5:14 AM
Ideally with a collapse widget inside the tab bar. TabBar does derive from Header after all, so it's not a huge leap to want to put tools in it.

ettavolt
11 Oct 2013, 8:41 AM
u9
That's what I have so far. Adding a tool is not so easy as I thought :).

mpost
11 Oct 2013, 9:54 AM
That's definitely on the right track, it just lacks the tools. I know from past experience that the whole header/tool thing is a complete PITA. I was hoping there was a non-obvious set of configs that would do what I wanted.

Another way to look at it is that you example is missing a better placeholder. Ideally the placeholder would contain both the tabs and the tools. (I think right now you have no placeholder? It doesn't show up in the fiddle's component tree. Either that or something that I don't understand is going on, given how you modified the header.)

ettavolt
14 Oct 2013, 2:01 AM
I've managed to put the tool. See the above feedle for new version.
Instead of creating placeholder I use tabbar as placeholder.

mpost
14 Oct 2013, 8:27 AM
Thanks, that's pretty awesome! It's almost exactly what I'm looking for!

chavivp
2 Jun 2016, 12:05 PM
I used some of the code above, but when we moved to ExtJS 6, it doesn't work anymore. The implementation of the header changed and the way the header and the tab bar interact breaks the implementation.
I found a different solution that disables the collapsibility and instead, implements the collapse by setting the height. This will work for Tabbed Panel that has tabs on the top.

Following is the code:

Ext.define("CollapsibleTabPanel",{
extend: 'Ext.tab.Panel',
alias: 'widget.collapsibletab',


expandTool: undefined,


collapsible: false,


expandedTab: true,


expandTab: function(){
this.expandedTab = true;
this.expandTool.setType('expand-top');
this.setHeight(this.getMaxHeight());
return true;
},


collapseTab: function(){
this.expandedTab = false;
this.expandTool.setType('expand-bottom');
this.setHeight(this.getTabBar().getHeight());
return true;
},


toggleTabCollapse: function(){
if (!this.getActiveTab())
this.setActiveTab(0);
return (this.expandedTab) ? this.collapseTab() : this.expandTab();
},


constructor : function(config) {
var me = this;


this.callParent(arguments);

var l = this.getTabBar().items.length>0;


for (i=0;i<l;i++){
this.getTabBar().getComponent(i).on('click',function(tab){
if (!me.expandedTab || !me.getActiveTab() || me.getActiveTab().title === tab.title){
me.toggleTabCollapse();
}
return true;
});
}


me.expandTool = Ext.create('Ext.panel.Tool',{
type: 'expand-bottom',
uiCls: ['top'],
handler: me.toggleTabCollapse,
componentCls: 'expander',
scope: me
});


var hasTabs = l>0;
if (hasTabs)
this.getTabBar().add(me.expandTool);//addTool




//Add the event if added at runtime
this.getTabBar().on('add',function(tab,component){
var hasTabs = this.items.length>0;

if (!hasTabs){
hasTabs = true;
this.add(me.expandTool);
}
if (component!=me.expandTool){
component.on('click',function(tab){
if (!me.expandedTab || !me.getActiveTab() || me.getActiveTab().title === tab.title){
me.toggleTabCollapse();
}
return true;
},me);
}


});


this.getTabBar().on('afterrender',function(tab,component){
me.collapseTab();
});


}
});




Ext.application({
name : 'Fiddle',


launch : function() {
Ext.create('Ext.Viewport',{
items: [
{
xtype: 'panel',
width: 300,
height: 50,
html: '<p>Static Content</p>'
},
{
xtype: 'collapsibletab',
width: 300,
items:[
{
xtype: 'panel',
width: 300,
height: 300,
title: 'Tab1',
html: '<p>Tab 1 Content</p>'
}
]

}
]
});

var c = Ext.ComponentQuery.query('collapsibletab');
c[0].add(
{
xtype: 'panel',
width: 300,
height: 300,
title: 'Tab2',
html: '<p>Tab 2 Content</p>'
}
)
}
});


Also fiddle:
https://fiddle.sencha.com/#fiddle/1bfb

akansha2014
19 Jan 2017, 1:34 PM
Hi All,

I have tried do use the same implementation as mentioned before in the forum but it doestn work if the tabs are not on top but are on the right? So I can make it work in this scenario?



<code>Ext.define("CollapsibleTabPanel",{ extend: 'Ext.tab.Panel',
alias: 'widget.collapsibletab',


expandTool: undefined,


collapsible: false,


expandedTab: true,


expandTab: function(){
this.expandedTab = true;
this.expandTool.setType('expand-right');
console.log(this);
this.setWidth(this.getMaxWidth());
return true;
},


collapseTab: function(){
console.log("collapsing the tab...");
this.expandedTab = false;
this.expandTool.setType('expand-left');
this.setWidth(this.getTabBar().getWidth());
return true;
},


toggleTabCollapse: function(){
if (!this.getActiveTab())
this.setActiveTab(0);
return (this.expandedTab) ? this.collapseTab() : this.expandTab();
},


constructor : function(config) {
var me = this;


this.callParent(arguments);


var l = this.getTabBar().items.length>0;


for (i=0;i<l;i++){
this.getTabBar().getComponent(i).on('click',function(tab){
if (!me.expandedTab || !me.getActiveTab() || me.getActiveTab().title === tab.title){
me.toggleTabCollapse();
}
return true;
});
}


me.expandTool = Ext.create('Ext.panel.Tool',{
type: 'expand-left',
uiCls: ['top'],
handler: me.toggleTabCollapse,
componentCls: 'expander',
scope: me
});


var hasTabs = l>0;
if (hasTabs)
this.getTabBar().add(me.expandTool);//addTool




//Add the event if added at runtime
this.getTabBar().on('add',function(tab,component){
var hasTabs = this.items.length>0;


if (!hasTabs){
hasTabs = true;
this.add(me.expandTool);
}
if (component!=me.expandTool){
component.on('click',function(tab){
if (!me.expandedTab || !me.getActiveTab() || me.getActiveTab().title === tab.title){
me.toggleTabCollapse();
}
return true;
},me);
}


});


this.getTabBar().on('afterrender',function(tab,component){
me.collapseTab();
});


}
});




Ext.application({
name : 'Fiddle',


launch : function() {
Ext.create('Ext.Viewport',{
layout: 'border',
items: [
{ xtype:'panel',
html :'<p>here...</p>'
},
{
xtype: 'collapsibletab',
region: 'east',
flex: 1,
collapseDirection:'left',
tabPosition:'left',
items:[
{
xtype: 'panel',
flex : 1,
title: 'Tab1',
html: '<p>Tab 1 Content</p>'
},
{
xtype: 'panel',
width: 300,
height: 300,
title: 'Tab2',
html: '<p>Tab 2 Content</p>'
}
]


}
]
});


}
});</code>

Regards
Akansha.