PDA

View Full Version : Layout Panel



duk
22 Oct 2010, 11:00 AM
Hi, all!

I have this code:

Ext.onReady(function(){
Ext.QuickTips.init();
var headpanel=new Ext.Panel({
region: 'north',
html: 'some html'
});
var startcont = new Ext.Panel({
html: 'welcome'
});

aaa = new Ext.Panel({
layout: 'fit',
title: 'welcome',
id:'maincont1',
region: 'center',
items: [startcont]
});
maincont = new Ext.Panel({
region: 'center',
layout: 'fit',
items: [aaa]
});

mainviewport= new Ext.Viewport({
layout: 'border',
items: [headpanel,maincont]});
});All fine, all display normal.

But when i write this code:


Ext.onReady(function(){
Ext.QuickTips.init();
var headpanel=new Ext.Panel({
region: 'center',
html: 'some html'
});
var startcont = new Ext.Panel({
html: 'welcome'
});

aaa = new Ext.Panel({
layout: 'fit',
title: 'welcome',
id:'maincont1',
region: 'center',
items: [startcont]
});
maincont = new Ext.Panel({
region: 'south',
layout: 'fit',
items: [aaa]
});

mainviewport= new Ext.Viewport({
layout: 'border',
items: [headpanel,maincont]});
});, then phrase 'welcome' not displayed.

Why? What reason? What need change to correct work?

Tnx, sorry for my english.

troseberry
22 Oct 2010, 11:16 AM
Well there are overnesting problems. Perhaps you can explain what the end result should look like and then we can help you write a better looking piece of code. There are layout problems and region problems and differences between the 2 piece of code you show.

duk
22 Oct 2010, 11:38 AM
I think, what result of second code must be equal to result of the first code.
Because in first example we have region north&center, and in second - center&south. Other part of both example are equal.

I are wrong?

troseberry
22 Oct 2010, 12:10 PM
So you want a viewport with a center region and a south region? Why did you choose a border layout if all you need is the two regions? Would a hbox layout work better?

Yes the code differences between the two are you switch the regions around. If the first worked and showed you what you want then why did you change? I am just trying to understand what you need here. You can also clean up your code by getting rid of the panel in a panel in a panel type of thing. Just add the needed pieces directly to the first panel. There is no sense in using embedded panels like this.

duk
22 Oct 2010, 10:00 PM
This code are part of application. Maincont is main panel, content of maincont often change ( maincont.remove(...) and maincont.add(...) ). Code of change are universal for whole application...
Such reason for use embedded panels.

I want make maincont not a "center" region.

troseberry
25 Oct 2010, 4:58 AM
Well the problem is that the way your second bit of code is that the center panel is now not the main conent and by definition the center panel will automatically resize itself to fill the unused space and because your south region has no height it will always be rendered out of view. Try adding a height to the south.

However I would rethink this layout. You typically would put your main type of content in a center panel like you did in the first code.