I was needing a way to expand the view of a panel when the user wanted to see more. There is always the way of resizable but, when I had the portal layout, this was even more imperative. After some thoughts, i built a maximize tool plugin that can be added to any panel and the maximize behaviour will act. Try it and let me know what you think.
Code for the plugin:
Code:
Ext.ux.MaximizeTool = function() {
this.init= function(ct) {
var maximizeTool = {
id: 'maximize',
handler: handleMaximize,
scope: ct,
qtip: 'Maximize'
};
ct.tools = ct.tools || [];
var newTools = ct.tools.slice();
ct.tools =newTools;
for(var i=0, len=ct.tools.length;i<len;i++) {
if (ct.tools[i].id=='maximize') return;
}
ct.tools[ct.tools.length] = maximizeTool;
};
function handleMaximize(event, toolEl, panel){
panel.originalOwnerCt = panel.ownerCt;
panel.originalPosition = panel.ownerCt.items.indexOf(panel);
panel.originalSize=panel.getSize();
if (!toolEl.window) {
var defaultConfig = {
id: (panel.getId() + '-MAX'),
width: (Ext.getBody().getSize().width - 100),
height: (Ext.getBody().getSize().height - 100),
resizable: true,
draggable: true,
closable: true,
closeAction: 'hide',
hideBorders: true,
plain: true,
layout: 'fit',
autoScroll: false,
border: false,
bodyBorder: false,
frame: true,
pinned: true,
bodyStyle: 'background-color: #ffffff;'
};
toolEl.window = new Ext.Window(defaultConfig);
toolEl.window.on('hide', handleMinimize, panel);
}
if (!panel.dummyComponent) {
var dummyCompConfig = {
title: panel.title,
width: panel.getSize().width,
height: panel.getSize().height,
html: ' '
};
panel.dummyComponent = new Ext.Panel(dummyCompConfig);
}
toolEl.window.add(panel);
if (panel.tools['toggle']) panel.tools['toggle'].setVisible(false);
panel.tools['maximize'].setVisible(false);
panel.originalOwnerCt.insert(panel.originalPosition, panel.dummyComponent);
panel.originalOwnerCt.doLayout();
panel.dummyComponent.setSize(panel.originalSize);
panel.dummyComponent.setVisible(true);
panel.dummyComponent.getEl().mask('This is maximized.');
toolEl.window.show(this);
};
function handleMinimize(window) {
this.dummyComponent.getEl().unmask();
this.dummyComponent.setVisible(false);
this.originalOwnerCt.insert(this.originalPosition, this);
this.originalOwnerCt.doLayout();
this.setSize(this.originalSize);
this.tools['maximize'].setVisible(true);
if (this.tools['toggle']) this.tools['toggle'].setVisible(true);
}
};
Sample code for the implementation:
Code:
var portalViewPort = new Ext.Viewport({
layout:'border',
hideBorders: true,
items:[
{
region: 'north',
height: 68,
split: false,
border: false,
bodyBorder: false,
autoLoad: {url: "header.my", nocache: true, scripts: true},
margins: {left: 0, top: 0, right: 0, bottom: 0}
}, {
region:'center',
autoScroll: true,
border: false,
bodyBorder: false,
bodyStyle: 'padding-left: 50px; padding-top:10px; padding-right: 50px;background-color: #ffffff;',
items: {
title: 'My testing Panel',
layout: 'fit',
width: 400,
height: 200,
plugins: new Ext.ux.MaximizeTool(),
html: '<p>Some content here</p>'
}
}, {
region:'south',
split: false,
height: 25,
border: false,
bodyBorder: false,
autoLoad: {url: "footer.my", nocache: true},
margins:'0 0 0 0'
}
]
});