CODEWITHSUNDEEP
sencha-touchsencha-touch-2
Élodie Petit
Élodie Petit

Reputation: 5914

Layout with Sencha Touch

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?

Upvotes: 0

Views: 1464

Answers (3)

Gayathri Mohan
Gayathri Mohan

Reputation: 2962

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'
                              },

Upvotes: 0

Swar
Swar

Reputation: 5503

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.

Upvotes: 0

Eli
Eli

Reputation: 14827

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.

Upvotes: 1

Related Questions