PDA

View Full Version : Showing a collapsed/expanded window in full screen???



PCSpectra
22 Jun 2011, 12:39 PM
Just curious, I have a series of gridpanel listboxes showing data and the interface has become somewhat convoluted/complicated.

I added some collapsible buttons to the panels to allow users to hide the various panels but what is truly desired is an additional button (beside the collapsible button) which when clicked would capture the entire screen and thus de-clutter the interface until they were done at which point returning back to normal would be ideal.

Is this possible through an extension or custom hack??? Reusing the existing grid panel would be ideal.

Cheers,
Alex

skirtle
23 Jun 2011, 5:47 PM
Can't you just remove the grid from its existing container and add it to a maximized Ext.Window? Then put it back when the window is closed.

PCSpectra
24 Jun 2011, 8:47 AM
Not sure how would I do that? Build window dynamically and reference the listbox? Can you show me how you might do this?

Cheers,
Alex

skirtle
26 Jun 2011, 2:19 AM
Bit like this maybe:


new Ext.Panel({
height: 300,
renderTo: Ext.getBody(),
width: 500,
items: [
{
// Placeholder for when the first panel is moved
flex: 1,
items: {border: false, title: 'Panel 1', html: '1 one solo'},
layout: 'fit',
tbar: [{text: 'Pop', handler: pop}]
}, {
// Placeholder for when the second panel is moved
flex: 1,
items: {border: false, title: 'Panel 2', html: '2 two duo'},
layout: 'fit',
tbar: [{text: 'Pop', handler: pop}]
}
],
layout: {
align: 'stretch',
type: 'hbox'
}
});

function pop() {
// this is the button, this.ownerCt is the toolbar
var placeHolder = this.ownerCt.ownerCt;
var panel = placeHolder.get(0);

var win = new Ext.Window({
items: panel,
layout: 'fit',
maximized: true,
title: 'Pop',
listeners: {
close: function() {
placeHolder.add(panel);
placeHolder.doLayout();
}
}
});

win.show();
}