Results 1 to 2 of 2

Thread: How to get nested containers

  1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    26

    Post How to get nested containers

    I want to split my fullscreen panel into 4x4 boxes plus a vertical column on the right, like below:
    ________
    | 1 | 2 | . |
    |__|__| 5 |
    | 3 | 4 | . |
    |__|__|__|

    The size of containers should take all the available screen size (might not be squares). My code almost works except the second vertical column ends moving on the first one (so visually the middle/second column is missing). What am I doing wrong in this code?

    Code:
    panel = new Ext.Panel({
                fullscreen: true,
                title: '4x4 boxes plus vertical column',
                layout: {
                    type: 'hbox',
                    align: 'stretch',
                    pack: 'start'
                },
                items: [
                        {
                            flex: "2",
                            layout: {
                                type: 'vbox',
                                align: 'stretch',
                                pack: 'center'
                            },
                            xtype: 'container',
                            defaults: {
                                xtype: 'component'
                            },
                            items: [  
                                {
                                    flex: "1",
                                    layout: {
                                        type: 'hbox',
                                        align: 'stretch'
                                    },
                                    xtype: 'container',
                                    items: [
                                        { cls: 'boxy', name: 'piece1', flex: "1"},
                                        { cls: 'boxy', name: 'piece2', flex: "1"}
                                    ]
                                },
                                {
                                    flex: "1",
                                    layout: {
                                        type: 'hbox',
                                        align: 'stretch'
                                    },
                                    xtype: 'container',
                                    items: [
                                        {cls: 'boxy', name: 'piece3', flex: "1"},
                                        {cls: 'boxy', name: 'piece4', flex: "1"}
                                  
                                    ]
                                }    
                            ]
                        },
                        {
                            flex: "1",
                            layout: {
                                type: 'vbox',
                                align: 'stretch',
                                pack: 'center'
                            },
                            xtype: 'container',
                            items: [
                                { html: "looger1"},
                                { html: "logger2"}
                            ]
                        }
                       ]
            });
    With the following css:
    Code:
            .boxy {
            position: absolute;
            border: 1px solid #056321;
            background: #C6D92C;
            opacity: 0.5;
            font-size: 10px;
            padding: 5px;
            z-index: 2;
            }

  2. #2
    Sencha User
    Join Date
    Mar 2010
    Posts
    26

    Default

    For the record, the issue was due to the fact the boxy was set as absolute. Changing it to 'position: relative;' makes things work as expected

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •