PDA

View Full Version : Maximize tab to the whole browser



dekely
25 Jul 2013, 10:26 AM
Hi All,
I'm trying the approach of removing a tab and adding it to a maximized window.
When I remove a tab from tabpanel and add it to a window
I get exception since el is null:



addCls : function(cls) {
var me = this,
el = me.rendered ? me.el : me.protoEl;

el.addCls.apply(el, arguments);
return me;
},


and this is my code:



tab = $W().tabPanel.remove(tab, true);
Ext.create('Ext.window.Window', {
layout:'fit',
closeAction: 'close',
title: tab.title,
maximizable: true,
maximized: true,
closable: false,//I don't want to see the x icon
items: [tab],
listeners:{
restore: function(win){
//add the tab again
var tab = win.items.get(0);
$W().tabPanel.insert($W().tabPanel.maximizedTabIndex, tab);
$W().tabPanel.setActiveTab(tab);
$W().tabPanel.createDblClickHandler(tab);
$W().tabPanel.maximizedTabIndex = -1;
win.close();
}
}
}).show();



Any idea?

thanks in advance

firefoxSafari
25 Jul 2013, 2:07 PM
When you invoke the remove method on the tab panel, you pass true for the second argument. This is the autoDestroy parameter. I don't think this is what you want. Won't that invoke destroy on the tab and try to clean up the dom? Try passing false for that - I think it will keep the dom around so what you're trying to do will work.

dekely
25 Jul 2013, 9:38 PM
Hi,
I'm sorry, the "true" was only a typo, I'm aware of the api to remove tab.
The thing is that my tab holds an iframe and it loads the content well.
When I remove it and add it to a window, I don't see the content but when I inspect the element in IE I do see the iframe (see screenshot).
So the question is, maybe when I added again to a window it does not render/layout?

45054

Thanks

dekely
26 Jul 2013, 2:24 AM
|I made a progress here.
I take the tab contentEL and put it in the window.
When I close the window, I need to take its contentEl and put it inside the tab

dekely
26 Jul 2013, 6:12 AM
Ok, I give up!
Can someone please tell me why the following code doesn't work?
I'm trying to take the tab panel and add it to a window.



Ext.onReady(function(){
var tab1 = new Ext.Panel({
id: 'section1',
title: 'First Section',
padding: 10,
html: '(this content will be replaced with an ajax load)'
});


var tabs = Ext.widget('tabpanel', {
renderTo: Ext.getBody(),
width: 450,
height: 350,
activeTab: 0,
defaults :{
bodyPadding: 10
},
items: [tab1,{
title: 'Tab 2',
html: 'bbbb',
id: 'tab2'
},{
title: 'Tab 3',
xtype: 'button',
text: 'max',
handler: function(){
//var tab = tabs.remove(tab1, false);
Ext.create('Ext.window.Window', {
layout:'fit',
closeAction: 'close',
title: tab1.title,
maximizable: true,
maximized: true,
closable: false,//I don't want to see the x icon
//contentEl: tab1.el,
items: tab1,
listeners:{
restore: function(win){
//add the tab again
//var tab = win.items.get(0);
//tabs.insert(tabs.maximizedTabIndex, tab);
//tabs.createDblClickHandler(tab);
//tabs.maximizedTabIndex = -1;
win.close();
}
}
}).show();
}}]
});

});

firefoxSafari
26 Jul 2013, 8:03 AM
Not 100% sure what part of the framework is doing this or if it's a bug, but it looks like when you add the already created tab to the window, the tab is hidden. It is still in the window, but has x-display-none style applied to it.

Explicitly invoking show on the tab might be a workaround. Try this:


Ext.onReady(function(){
var tab1 = new Ext.Panel({
id: 'section1',
title: 'First Section',
padding: 10,
html: '(this content will be replaced with an ajax load)'
});




var tabs = Ext.widget('tabpanel', {
renderTo: Ext.getBody(),
width: 450,
height: 350,
activeTab: 0,
defaults :{
bodyPadding: 10
},
items: [tab1,{
title: 'Tab 2',
html: 'bbbb',
id: 'tab2'
},{
title: 'Tab 3',
xtype: 'button',
text: 'max',
handler: function(){
//var tab = tabs.remove(tab1, false);
Ext.create('Ext.window.Window', {
layout:'fit',
closeAction: 'close',
title: tab1.title,
maximizable: true,
maximized: true,
closable: false,//I don't want to see the x icon
//contentEl: tab1.el,
items: tab1,
listeners:{
restore: function(win){
//add the tab again
//var tab = win.items.get(0);
//tabs.insert(tabs.maximizedTabIndex, tab);
//tabs.createDblClickHandler(tab);
//tabs.maximizedTabIndex = -1;
win.close();
}
}
}).show();

tab1.show(); //Show tab... not 100% sure why it was hidden
}}]
});

});

firefoxSafari
26 Jul 2013, 8:07 AM
Actually, now that I think about it, it makes perfect sense that the tab would be hidden. It is already rendered to the tab panel. When you move to the third tab, the first one is hidden. Adding it to the window the style would still be hidden.

dekely
26 Jul 2013, 8:11 AM
That works for me!

Thank you!