1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    32
    Answers
    3
    Vote Rating
    1
    AlexLans is on a distinguished road

      0  

    Default Answered: Layout question with alignment

    Answered: Layout question with alignment


    I'm using Sencha Touch 2.0.1.1
    I need to build a panel with 6 buttons, like this:
    screenshot.PNG
    The buttons should be equal alligned horizontally and vertically. The size of the buttons should be around 150px x 150px I want them to be squared.

    I've created this with the following code:
    Code:
    initialize: function () {        var upperspacer = Ext.create('Ext.Container', {
                height: upperMarginHomeScreen,
                layout:{
                    type: 'hbox',
                    align: 'strech'
                },
                html: '&nbsp'
            });
    
    
            var middlespacer = Ext.create('Ext.Container', {
                height: middleSpacerHomeScreen,
                layout:{
                    type: 'hbox',
                    align: 'strech'
                },
                html: '&nbsp'
            });
           
            var upperpanel = Ext.create('Ext.Container', {
                height: 256,
                layout:{
                    type: 'hbox',
                    align: 'strech'
                },
                defaults:{flex:'1'},
                items: [
                {
                    xtype: 'panel',
                    heigth: 190,
                    width: leftMarginHomeScreen
                },
                {
                    xtype: 'button',
                    id: 'cmdRadiology',
                    cls: 'radiologyButton',
                    pressedCls: 'radiologyButtonPressed',
                    scope: this
                },
                {
                    xtype: 'panel',
                    heigth: 190
                },
                {
                    xtype: 'button',
                    id: 'cmdDocuments',
                    html: 'Documenten',
                    heigth: 190
                },
                {
                    xtype: 'panel',
                    heigth: 190
                },
                 {
                    xtype: 'button',
                    html: 'Documenten',
                    heigth: 190
                },
                {
                    xtype: 'panel',
                    heigth: 190,
                    width: leftMarginHomeScreen
                }
                ]
            });
    
    
            var bottompanel = Ext.create('Ext.Container', {
                height: 256,
                layout:{
                    type: 'hbox',
                    align: 'strech'
                },
                defaults:{flex:'1'},
                items: [
                {
                    xtype: 'panel',
                    heigth: 190,
                    width: leftMarginHomeScreen
                },
                {
                    xtype: 'button',
                    html: 'Radiologie',
                    heigth: 190
                },
                {
                    xtype: 'panel',
                    heigth: 190
                },
                {
                    xtype: 'button',
                    html: 'Documenten',
                    heigth: 190
                },
                {
                    xtype: 'panel',
                    heigth: 190
                },
                 {
                    xtype: 'button',
                    html: 'Documenten',
                    heigth: 190
                },
                 {
                    xtype: 'panel',
                    heigth: 190,
                    width: leftMarginHomeScreen
                }
                ]
            });
    But as you can see, the allignment is all hardcoded. When I turn my iPad all the allignment is messed up. Can anyone help me out here? There is no control in Sencha like a Unigrid (Silverlight) that detirmes all spaces etc.? I need some help with this. Thank you.

  2. Solved. I've created 2 containers with type hbox. The I've put them in a vbox container and the buttons are nicely alligned.

  3. #2
    Sencha User
    Join Date
    Dec 2011
    Posts
    32
    Answers
    3
    Vote Rating
    1
    AlexLans is on a distinguished road

      0  

    Default


    some of the code is ST1.0 style sorry for that. I'm fixing it right away.

  4. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    32
    Answers
    3
    Vote Rating
    1
    AlexLans is on a distinguished road

      0  

    Default


    Solved. I've created 2 containers with type hbox. The I've put them in a vbox container and the buttons are nicely alligned.

Tags for this Thread