1. #1
    Touch Premium Member
    Join Date
    Jul 2011
    Posts
    4
    Vote Rating
    0
    setfanovic72 is on a distinguished road

      0  

    Default Answered: Newbie question about layouts

    Answered: Newbie question about layouts


    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:

    Code:
    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);
        }
    });
    Code:
    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.

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

    Code:
    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.

  3. #2
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Answers
    15
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    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

    Code:
    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

  4. #3
    Touch Premium Member
    Join Date
    Jul 2011
    Posts
    4
    Vote Rating
    0
    setfanovic72 is on a distinguished road

      0  

    Default


    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:

    Code:
        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.

  5. #4
    Sencha User
    Join Date
    Sep 2010
    Location
    Netherlands
    Posts
    120
    Answers
    3
    Vote Rating
    4
    aacoro is on a distinguished road

      0  

    Default


    Hi you can also create basic HTML:

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

    Code:
    renderTo: 'content'
    Good luck,
    Pozdrav

  6. #5
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,596
    Answers
    542
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


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

    Code:
    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.

  7. #6
    Touch Premium Member
    Join Date
    Jul 2011
    Posts
    4
    Vote Rating
    0
    setfanovic72 is on a distinguished road

      0  

    Default


    Hi,

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

    Kind regards,
    Stefan

Thread Participants: 3