PDA

View Full Version : Can I temorarily 'maximize' a tab



jorgen.rasmussen
15 Dec 2010, 8:05 PM
Hi all,

I have a design challenge that I hope someone would have come across before.

I have a border layout with a tab panel in the East region. I would like to provide the user with a tool button to temporarily maximise the content of this panel in a window. Are there any smart way to use a existing tab panel and then bring it into a maximised window and back again?

Cheers

Jorgen

darthwes
15 Dec 2010, 9:52 PM
Keep in mind there's more than one way to get everything working, but I was able to get this:



new Ext.Viewport({
layout: 'border',
items: [{
html: "Centaur Regun.",
region: 'center'
},
{
xtype: 'tabpanel',
region: 'east',
width: 225,
activeTab: 0,
tbar: [{
xtype: 'button',
text: 'test',
handler: function (btn) {
btn.disable();
var tp = this.ownerCt.ownerCt;
var at = tp.getActiveTab();
var at_idx = tp.items.indexOf(at);
tp.remove(at, false);
tp.doLayout();

var cWin = new Ext.Window({
modal: true,
title: 'Bigger',
layout: 'fit',
items: [at],
listeners: {
'close': function (b, t, a, idx) {
return function () {
this.remove(a, false);
t.insert(idx, a);
t.activate(a);
t.doLayout();
b.enable();
};
}(btn, tp, at, at_idx)
}
});


cWin.show();
cWin.maximize();
}
}],
items: [{
title: 'Tab A',
html: "This would be tab a."
},
{
title: 'Crazy Tab!',
autoLoad: 'file1.html'
},
{
title: 'Some tab',
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
defaults: {
flex: 1
},
items: [{
html: 'This is another simple panel, right?'
},
{
html: 'How bout me?'
}]
}]
}]
});