Newbie question about layouts

[setfanovic72]

Hi,

I just started with extjs 4. Today I have tried to build a simple login form. Technically it works but I am struggling with te layout.

What I did is the following.
I created a viewport with a border layout:


Ext.define('SISCA.view.Viewport', {
extend: 'Ext.Viewport',
id: 'viewport',

layout: {
type: 'border',
padding: 5
},
defaults: {
split: true
},

initComponent: function() {
var me = this;

Ext.apply(me, {
items: [
{
region: 'north',
html: '<h3 class="header">SiSCA</h3>',
height: 70,
cls: 'appHeader',
split: false
}
{
region: 'center',
xtype: 'loginform'
title: 'Login',
}
]
});

me.callParent(arguments);
}
});


The code of the login form:

Ext.define('SISCA.view.user.Login' ,{
extend: 'Ext.form.Panel',
alias : 'widget.loginform',

title : 'Inloggen in SiSCAa',

width: 150,
bodyPadding: 10,

initComponent: function() {

this.items = [
{
xtype: 'textfield',
name : 'username',
fieldLabel: 'Gebruikersnaam',
allowBlank: false
},
{
xtype: 'textfield',
name : 'password',
fieldLabel: 'Wachtwoord',
inputType: 'password'
}
];

this.buttons = [
{
text: 'Login',
action: 'login'
}
];

this.callParent(arguments);
}
});

The result is a border layout with a top region which has a height of 70px and a center region. So far, so good.
The behavior of the center region in a border layout is that it will fill up all the space which is left after the top region is created. This behavior ensures that the entire center area is filled with the login panel. The panel is being streched to the size of the center region.

What I want is the following:
I want my login panel to have an absolute size and I want it to be aligned in the center of the center region of the border layout.

I allready tried several things (for example a nested panel) but so far I didn't succeed. Can somebody help me?

Thanks a lot!!

Regards Stefan.

[stevil]

I think what you need to do is

1) change your center region to an xtype of 'container'
2) add an 'anchor' or 'vbox' layout configuration to that center region's config
2a) you may need to experiment with the best configuration - see the doc on those layout types for more info
3) add an items config to the center region with your login panel

So, the center region will still fill the space, but will just be a blank canvas. The layout you choose for that will control the way that the child login panel you add to it will render.

Something like




initComponent: function() {
var me = this;


Ext.apply(me, {
items: [
{
region: 'north',
html: '<h3 class="header">SiSCA</h3>',
height: 70,
cls: 'appHeader',
split: false
},
{
region: 'center',
xtype: 'container',
layout: 'anchor',
items: [ {

xtype: 'loginform'
title: 'Login',
anchor: '50% 50%'
}]
}
]
});


me.callParent(arguments);
}





hope this helps

stevil

[setfanovic72]

Thanks for your quick reply, stevil.
It helped me a lot further.
I first tried the anchor layout like you suggested but that was not good for centering the login panel.
With the vbox layout, I am able to center the login panel horizontally at the mid-with of the container but it's still not vertically aligned.
I tried it with a vbox and a hbox together. this works if I set the width (for example 1268), I don't want to set the width hard coded but I can't find another solution since there not seems to be a layout which help me to center a item horinzontaly and verticaly. This is the code I use now:


initComponent: function() {
var me = this;


Ext.apply(me, {
items: [
{
region: 'north',
html: '<h3 class="header">SiSCA</h3>',
height: 70,
cls: 'appHeader',
split: false
},
{
region: 'center',
xtype: 'container',
layout: {
type: 'hbox',
align: 'middle'
},
items: [
{
xtype: 'container',
layout: {
type: 'vbox',
align: 'center'
},
height: 150,
width: 1268,
items: [
{
xtype: 'loginform',
title: 'Login',
width: 300,
flex: 1
}
]
}
]
}
]
});


me.callParent(arguments);
}


Whenever I don't set the width to 1268, the login panel is aligned totally left.

Any other suggestions are welcome. If not I can live with te solution I now have.

Again, thanks for the help!

Stefan.

[aacoro]

Hi you can also create basic HTML:




<table align="center" class="contenttable" cellpadding="0" cellspacing="0" border="0">
<tr>
<td id="content"></td>
</tr>
</table>

and then



renderTo: 'content'


Good luck,
Pozdrav

[skirtle]

You don't need to use both vbox and hbox, one or the other will suffice.


new Ext.container.Viewport({
height: 300,
layout: 'border',
width: 300,
items: [
{
height: 70,
region: 'north'
}, {
region: 'center',
xtype: 'container',
items: {
height: 300,
title: 'Login',
width: 300
},
layout: {
align: 'center',
pack: 'center',
type: 'vbox'
}
}
]
});

In my example I've used a fixed width and height for the login panel, both of which are needed. There are alternatives, e.g. it can be sized relative to the available space. If that's what you want then let me know and I'll come up with an example.

[setfanovic72]

Hi,

Sorry for the late reply. The last post was the solution. Thanks for all the replies!

Kind regards,
Stefan