PDA

View Full Version : maximize a panel nested within 2 panels to full browser window



mikenereson
23 Jun 2009, 10:35 AM
I have a viewport, with a panel in a panel in a panel. So, for example, the reader panel in the feed reader demo

http://extjs.com/deploy/dev/examples/feed-viewer/view.html.
I would like to maxmize the nested panel (reader panel) to the full window (over the entire viewport) without rerendering the content within the panel (so that if have a video running, I want it to continue without any interruption). And of course I need to be able to minimize it down to to its original containment.

Can this be done?

Thanks.

akshayxyz
17 Jun 2010, 2:26 AM
Hi,
Apology to awaken this thread, but did you or anyone else mange to achieve this?

Animal
17 Jun 2010, 2:35 AM
Collapse all the other border regions.

Assuming your panel is the center region, it will expand to fill remaining space - that's what the center region does.

akshayxyz
17 Jun 2010, 2:57 AM
Thanks for the quick response.
I realize that my case might be different. Here is how I am trying to layout.
root(borderlayout)->north, east, west, south and then center(vertical panel) -> myMaximizablePanel.
To start with I wish this myMaximizablePanel to appear as part of "center", and on click of a button/ menu, it should maximize to fill browser window.

As a starting point, I looked at AccordianWindow Example, and it is able to fill the whole window, however, it seems it is a floating dialogbox kind of, and not part of any nested panel.
When I try to add com.extjs.gxt.ui.client.widget.Window to this nested center panel, it maximizes within the center, however -its edges are obscured by contents of my east/west/north/south widgets.

akshayxyz
17 Jun 2010, 2:58 AM
Sorry, it seems its wrong forum ( it should be in gxt forum), can some moderator please move it?

Animal
17 Jun 2010, 3:03 AM
Same principle applies though, and my original answer stands.

Collapse border regions, and center will maximize.

I actually do this in an image database maintenance app I work on.

There's a tree, and a dataview containing thumbnails, and a log panel, and a property grid.

And there is an image view in the center. There's a maximize tool on that so they can see large images. And on maximize, it's hidden, and a "restore" tool is shown.

verizon1
7 Jun 2012, 5:49 AM
Can somebody help me the same scenario that was discussed earlier on this topic.I did follow the steps discussed here like collapse borders, but it didn't work.

Here is the JS Code

Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [
{
region: 'north',
title: 'Page Title',
html: 'Information goes here',
bodyPadding: 10,
height: 100,
margins: '5 5 5 5'
},
{
// could use a TreePanel or AccordionLayout for navigational items
region: 'west',
collapsible: true,
title: 'Navigation',
width: 150,
margins: '0 5 0 5'
},
{
region: 'south',
title: 'South Panel',
collapsible: true,
html: 'Information goes here',
bodyPadding: 10,
split: true,
height: 100,
minHeight: 100,
margins: '0 5 5 5'
},
{
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 200,
margins: '0 5 0 0'
},
{
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically',
bodyPadding: 10
}
}
]
});



My Scenario is, when I maximize the east panel I need the east panel to be maximized on top of center panel.


Thanks in Advance




Same principle applies though, and my original answer stands.

Collapse border regions, and center will maximize.

I actually do this in an image database maintenance app I work on.

There's a tree, and a dataview containing thumbnails, and a log panel, and a property grid.

And there is an image view in the center. There's a maximize tool on that so they can see large images. And on maximize, it's hidden, and a "restore" tool is shown.