Layout with Sencha Touch

Question

Below is the code of a view in our project. I want a formpanel and a button in a vbox layout. I want to center the button horizontally.

Ext.define('Coder.view.membership.Login', {
    extend: 'Ext.Container',
    xtype: 'membershiploginview',

    requires: ['Ext.field.Password'],

    config: {
        title: 'Membership',
        layout: {
            type: 'vbox',
            align: 'center',
            pack: 'center'
        },
        items: [
            {
                xtype: 'formpanel',
                items: [
                    { xtype: 'textfield', name: 'userName', label: 'User ID' },
                    { xtype: 'passwordfield', name: 'password', label: 'Password' }
                ],
                height: 300,
                flex: 1
            },
            { xtype: 'button', text: 'Login' }
        ]
    }
})

With this configuration, the formpanel takes all available space vertically but none of the controls in it are visible. I can see the button centered horizontally where the formpanel ends. Why can't I see the controls in the formpanel?

Answer 1

In vbox layout:

1. pack: center will placed items in the middle vertically.

2. align: center will placed items in the middle horizontally.

Your form panel didn't show up because you do not specify any width for your form so your form will obviously takes width: 100% as default, therefore your config align: center get conflict.

To make it works, you should either remove that config or specify a width for your form panel.

Answer 2

Instead of this code,

{ 
  xtype: 'button', 
  text: 'Login' 
}

Use it like this:

title   : 'Membership',            
items   : [
    {
        xtype   : 'formpanel',
        items: [
            { xtype: 'textfield', name: 'userName', label: 'User ID' },
            { xtype: 'passwordfield', name: 'password', label: 'Password' }
        ],
        height : 300
    },{
        layout : {
            type : 'vbox',
            align : 'center'
        },
        items : [{ 
            xtype: 'button', 
            text: 'Login',
            width : 100 
        }]
    }
]

It takes layout:'auto' by default and puts the button at the center.

Answer 3

you give the login button Style like margin-left and margin right

                {
                                xtype:'button',
                                ui:'decline',
                                style: 'font-size: .8em; border:#A4A4A4 solid 1px;border-radius: 6px; -moz-border-radius:6px ;-webkit-border-radius:6px ; margin-left: 20px; margin-right: 20px; height:40px',
                                html:'<font color="white">Sign In</font>',
                                action:'signIn'
                              },