PDA

View Full Version : Layout panels to Fit Center Panel



mvbaffa
11 Nov 2010, 1:42 PM
Hi,

I have a Viewport and I want to fill my center panel with a view generated by Ext Designer. The image and code are attached.

I want my main Container id=usuarioView to strech all over centerpanel. The inner container id=mainContainer is a hbox layout to display the two panels contasPanel and usuariosPanel side by side.

The problem is that neither contasPanel nor usuariosPanel stretch as you can see in the image. usuariosPanel is empty and contasPanel has combobox. I have tried some different layouts for them but they do not stretch.

How can I make it work ???

Thanks in advance

Animal
11 Nov 2010, 10:56 PM
layout ?

Using the designer does not mean that you do not have to understand Ext JS.

http://dev.sencha.com/deploy/dev/docs/

In particular http://dev.sencha.com/deploy/dev/docs/?class=Ext.Container

mvbaffa
12 Nov 2010, 5:13 AM
Hi,

If I define widht and height of my inner container (mainContainer) thier child panels strech correctly. But if this container has no pre-defined width and height this problem occurs.

Maybe the problem is that none of the containers have set a width and height. I beleived that the outer panel having a 'fit' layout could solve the problem. But it did not.

I am still looking for a solution. I will check the documents you have suggested.

Thanks

plalx
12 Nov 2010, 6:27 AM
E.g. of an hbox layout nested in a border layout, that might help you to understand.



new Ext.Viewport({
layout: 'border',
items: [
{
xtype: 'container',
region: 'center',
layout: 'hbox',
layoutConfig: {
align: 'stretch',
pack: 'start'
},
defaults: {
frame: true,
flex: 1
},
items: [
{ html: 'Panel 1' },
{ html: 'Panel 2' }
]
}
]
});

mvbaffa
12 Nov 2010, 10:15 AM
Hi,

I have not tried this kind of solution. Putting the pannels directly in the center region. I have used a Container with hbox layout and then, nested, the two panels.

I cannot right now access my development machine. As soon as I get there I will try your solution.

Thank you.

mvbaffa
14 Nov 2010, 10:44 AM
Thanks scarsick,

But I really need to have both panels nested in a container with hbox layout.

Something like this:



AssetToolbox.ExtJs.Comp.UsuarioExtUi = Ext.extend(Ext.Container, {
layout: 'fit',
id: 'usuarioView',
initComponent: function() {
this.items = [
{
xtype: 'container',
layout: 'hbox',
id: 'mainContainer',
items: [
{
xtype: 'panel',
title: 'Contas',
flex: 1,
layout: 'fit',
padding: '10px',
frame: true,
id: 'contasPanel',
items: [
{
xtype: 'combo',
flex: 1,
store: 'contasStore',
mode: 'local',
displayField: 'nome',
valueField: 'id',
emptyText: 'Selecione uma conta',
id: 'cmbContas'
}
]
},
{
xtype: 'spacer',
flex: 1,
width: 10
},
{
xtype: 'panel',
title: 'Usuarios',
flex: 3,
layout: 'fit',
frame: true,
id: 'usuariosPanel'
}
]
}
];
AssetToolbox.ExtJs.Comp.UsuarioExtUi.superclass.initComponent.call(this);
}
});


Here I have an outer container with fit Layout with a nested container with hbox Layout. So that its horizontally disposed content can fit the hole center region.

The two panels might, nested in this inside container, have a vbox layout so that I can dispose vertically its components.

I cannot see any error. I would have to do exactly this in similar environments like Flex and Silverlight. But I do not know how to do it in Ext Js.

I have already tried to use border, column (with stretch) and other layouts.

If there is someone that had the same problem please help me. I am stucked.

Thanks in advance.