1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    41
    Answers
    7
    Vote Rating
    0
    dshookowsky is an unknown quantity at this point

      0  

    Default Answered: Centering a panel within a panel

    Answered: Centering a panel within a panel


    I'm trying to create a layout that has a carousel that swaps reports left to right. Each report has a background image tiled across 95% of the height so as to not obscure the carousel controls. Inside that 95% panel, I'd like to center a panel with a fixed color background horizontally and vertically.

    All of this should be based on percentage height/width to support different screens.

    I've tried using the following classes / code to lay it out, but it doesn't seem to work with percentage values.

    I must be missing something basic. I spent 2 hours trying to figure out why Sencha was automatically adding display: none to my inner panel and now it's refusing to display more than a single line of text, ignoring my height specification.


    Code follows

    Code:
    .reportBorder {
        background-image: url('my-image.png');
        height: 95% !important; /* stop short of whole page to show carousel buttons */
        width: 100%;
    }
    .report {
       background: #282828;
    }
    Code:
    /**
    * @class Main Main view for tablets. 
     */
    Ext.define('ManagerDashboard.view.tablet.Main', {
                    extend : 'Ext.Container',
                    xtype : 'mainview',
     
                    requires : ['Ext.navigation.Bar'],                
                    config : {
                                    fullscreen : true,
     
                                    layout : {
                                                    type : 'card',
                                                    animation : {
                                                                    type : 'slide',
                                                                    direction : 'left',
                                                                    duration : 250
                                                    },
                                    },
     
                                    items : [
                                                    {
                                                                    id : 'leftBar',
                                                                    cls: 'black',
                                                                    xtype : 'panel',                                  
                                                                    docked : 'left',
                                                                    width : 100,
                                                                    layout: 'vbox',
                                                                    defaults: {flex: 1},
                                                                    items: [
                                                                                    {
                                                                                                    xtype: 'image',
                                                                                                    src: 'resources/images/logo_w.png',
                                                                                                    cls: ['rotated'],
                                                                                                    height: 50,
                                                                                                    width: 300,
                                                                                                    top: 150,
                                                                                                    left: -110
                                                                                    },
    
    
                                                                                    {
                                                                                                    xtype: 'label',
                                                                                                    html: 'Manager Dashboard',
                                                                                                    cls: ['label', 'rotated'],
                                                                                                    top: '50%',
                                                                                                    width: 300,
                                                                                                    left: -110
                                                                                    }
                                                                    ]
                                                    },
                                                    {
                                                                    xtype: 'panel',
                                                                    cls: 'reportBorder',
                                                                    layout: 'hbox',
                                                                    pack: 'center',
                                                                    align: 'center',
                                                                    items: [{               
                                                                                    id: 'Report1',                                                                                      
                                                                                    xtype: 'panel',
                                                                                    cls: 'report',
                                                                                    width: '70%',
                                                                                    height: '70%',
                                                                                    html: 'Report1'
                                                                    }]
                                                                                                                    
                                                    }                              
                                    ]
                    }
    });

  2. Thanks for the reply. It wasn't quite the answer, but it led me in the right direction.

    Because it's an hbox layout, I shouldn't have been specifying the height at all. For some reason, specifying the height caused Sencha to ignore the height and forced it to a single line of text.

    I removed the height and width from the component config and specified margin: 5% and width: 90% in the report class. That seems to have settled the centering functionality.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Answers
    3454
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If you have a height and width of 50% then you can set the margin-top and margin-left to half that which is 25%.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    41
    Answers
    7
    Vote Rating
    0
    dshookowsky is an unknown quantity at this point

      0  

    Default Solution: Don't specify height

    Solution: Don't specify height


    Thanks for the reply. It wasn't quite the answer, but it led me in the right direction.

    Because it's an hbox layout, I shouldn't have been specifying the height at all. For some reason, specifying the height caused Sencha to ignore the height and forced it to a single line of text.

    I removed the height and width from the component config and specified margin: 5% and width: 90% in the report class. That seems to have settled the centering functionality.

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,649
    Answers
    3454
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    If you are using hbox then you can use align and/or pack to center.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User
    Join Date
    Mar 2012
    Posts
    41
    Answers
    7
    Vote Rating
    0
    dshookowsky is an unknown quantity at this point

      0  

    Default


    I had both the align and pack set to center, but because I was specifying the height, it wasn't displaying correctly. I also wanted to ensure that there was an adequate margin to see the textured background image.

Thread Participants: 1

Tags for this Thread