PDA

View Full Version : Basic layout



F1
29 Apr 2007, 1:32 AM
I discovered this amazing library yesterday, and I'm having a little trouble creating a basic layout. I tried to find some documentation that could explain how to use it, but I really couldn't find any, and surprisingly, a forum search didn't return anything useful.

The layout I want to achieve is this:



-----|------|
|West|Center|
| | |
-------------
|South |
-------------

I need the center panel to have a minimum height and width; west and south are collapsible, and their dimensions adjust to fill the rest of the page.

It's very similar to the nested layout provided as an example in the API, but I couldn't work out how to rearrange it as desired.

Could anyone help me with my problem, or point me in the direction of any resources that could help? I appreciate that this is probably a very simple problem that is directly resolved by some piece of documentation, but I have searched and found nothing.

dfenwick
29 Apr 2007, 1:39 AM
It's actually not a nested layout at all. It's just a borderlayout. You must have a center panel. South and north will always extend to the left/right edges of the borderlayout, east/west will then extend to the height left over between the north/south panels. Center will absorb the rest of the space.


Simple = function() {
var southPanel, westPanel, centerPanel;
return {
init : function() {
var mainLayout = new Ext.BorderLayout(document.body, {
south: {
split: true, initialSize: 300
},
west: {
split: true, initialSize: 200
},
center: {
}
});
mainLayout.beginUpdate();
mainLayout.add('south', southPanel = new Ext.ContentPanel('south-div', {
fitToFrame: true, closable: false
}));
mainLayout.add('west', westPanel = new Ext.ContentPanel('west-div', {
fitToFrame: true, closable: false
}));
mainLayout.add('center', centerPanel = new Ext.ContentPanel('center-div', {
fitToFrame: true, autoScroll: true
}));
mainLayout.endUpdate();
}
};
}();
Ext.EventManager.onDocumentReady(Simple.init, Simple, true);

F1
29 Apr 2007, 2:38 AM
Thank you, that works great.

I am unsure how to set minimum height and width on the center panel -- minSize only covers one dimension.

Also, my body has the class ytheme-gray, yet the light-blue theme is still displayed. Any ideas on how to resolve?

72
29 Apr 2007, 6:02 AM
For theme check first (in firebug) if Theme CSS definition file is really loaded ... Tab NET

And about the min width and height cant set so i dont know if its right answer but u can set any other region than center and there is maxSize (or minSize) defined and the way of use of this parameter is expectable. So size in west and east means width, in north and south it means heigth.
Just make it in other way :)

dfenwick
29 Apr 2007, 1:10 PM
For theme check first (in firebug) if Theme CSS definition file is really loaded ... Tab NET

And about the min width and height cant set so i dont know if its right answer but u can set any other region than center and there is maxSize (or minSize) defined and the way of use of this parameter is expectable. So size in west and east means width, in north and south it means heigth.
Just make it in other way :)

Absolutely correct. The center panel expands to the rest of the border layout. That's by design. There's really no way to prevent it from shrinking to 0.

For the theme issue, did you actually include the ytheme-gray.css file in your html?


<link rel="stylesheet" type="text/css" href="../ext-1.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../ext-1.0/resources/css/ytheme-gray.css" />

F1
29 Apr 2007, 4:10 PM
What is the best way to enforce minimum dimensions for the center panel, then? For the purposes of my application I need the two other panels to adjust their maximum possible size according to the center panel - so that they'll always be a different size under different resolutions.

Could I change the center panel to another one, and make (for example) south my center panel instead? Although I need minimum height and width.

dfenwick
29 Apr 2007, 5:15 PM
What is the best way to enforce minimum dimensions for the center panel, then? For the purposes of my application I need the two other panels to adjust their maximum possible size according to the center panel - so that they'll always be a different size under different resolutions.

Could I change the center panel to another one, and make (for example) south my center panel instead? Although I need minimum height and width.

You could swap the terminology of your west/center to be center/east on the regions. You'd then have control over the minimum width of the region. However you still can't control the height of that region. It will still expand to fit the height of the container tag. Technically you could programmatically adjust the south region's minimum size after a resize event occurs, but that gets really tricky to handle.

If I may ask, what's the application and why is it critical to keep that region a specific minimum width/height?

F1
30 Apr 2007, 12:06 AM
The main aim is simply to learn some Ext, so I can use it where appropriate in the future. A friend asked me to make a page to frame his Flash game - which has a pixel height and width - with navigation to other games on one side, and extra information on the bottom. The reason I want a minimum height and width is so that the entire game will be visible, otherwise the user will have to resize to fit the game.

Having just discovered Ext, I saw it as the ideal opportunity to learn how to use it. (Experience is the best way to learn, as I have discovered with other learning experiences; whenever I try to learn something without actually needing it for a specific project I don't take much of it in and tend to lose interest).

dfenwick
30 Apr 2007, 5:35 AM
It's the same problem as it would be if their browser window was too small with Flash and whatnot. Sticking it in an east/west region will get the left/right min/max, but there's no guarantee the browser height will be big enough to contain the Flash control. It's just the way the layout manager works.

Incidentally, and before you get too far into it, you'll probably need to shim the flash stuff. Make sure you read through the BorderLayout docs carefully so you understand what complications you'll run into.

IanGrainger
30 Oct 2007, 3:48 AM
The center panel expands to the rest of the border layout. That's by design. There's really no way to prevent it from shrinking to 0.

I'm having the same issue, but in a three column layout. When you make the page too small, you end up with no centre column at all, really I would like to specify a minimum on the centre column, which takes precendence over the width of the other columns. I've tried hooking into the resize event for the main panel, but that doesn't help, because even if I do resize it back to the minimum width I want, it just goes underneath the east panel :(

Don't know if this is a feature request for Ext, but if anyone has any idea of how to achieve this now, or how I can suggest it as a feature, please let me know!

Thanks!