1. #1
    Sencha User
    Join Date
    Sep 2011
    Posts
    38
    Vote Rating
    1
    howHardCanItBe is on a distinguished road

      0  

    Default Answered: nested panels are not displayed

    Answered: nested panels are not displayed


    Hi, I am trying to create a container or panel with some toolbars and six content areas. The toolbars are displaying fine, but the panels are not. What am I missing?

    Code:
    Ext.application({
        name: 'test app',
        launch: function () {
    
    
            Ext.create('Ext.Container', {
                fullscreen: true,
                layout: 'vbox',
                items: [
                    {
                        xtype: 'toolbar',
                        dock: 'top'
                    },
                    {
                        xtype: 'panel',  
                        //fullscreen: 'true',                  
                        layout: 'fit',
                        item: [
                            {
                                xtype: 'panel',
                                flex: 1,
                                items: [
                                    {
                                        xtype: 'panel',
                                        dock: 'left',
                                        items: [{
                                            html: "blah blah blah"
                                        }]
                                    },
                                    {
                                        xtype: 'panel',
                                        items: [{
                                            html: "blah blah blah"
                                        }]
                                    }
                                ]
                            },
                            {
                                xtype: 'panel',
                                flex: 1,
                                items: [
                                    {
                                        xtype: 'panel',
                                        dock: 'left',
                                        items: [{
                                            html: "blah blah blah"
                                        }]
                                    },
                                    {
                                        xtype: 'panel',
                                        items: [{
                                            html: "blah blah blah"
                                        }]
                                    }
                                ]
                            },
                            {
                                xtype: 'panel',
                                flex: 1,
                                items: [
                                    {
                                        xtype: 'panel',
                                        dock: 'left',
                                        items: [{
                                            html: "blah blah blah"
                                        }]
                                    },
                                    {
                                        xtype: 'panel',
                                        items: [{
                                            html: "blah blah blah"
                                        }]
                                    }
                                ]
                            }
                        ]
                    },
                    {
                        xtype: 'toolbar',
                        dock: 'bottom'
                    }
                ]
            });
    
    
    
    
            }
        }
    
    
    });

  2. You need to use layouts better. Here is your code with many comments:

    Code:
    Ext.create('Ext.Container', {
        fullscreen: true,
        layout: {
            type : 'vbox',
            align : 'stretch'
        },
        items: [
            {
                xtype: 'toolbar',
                docked: 'top' //use docked not dock
            },
            {
                xtype: 'panel',
                //layout: 'fit', //this will only allow one child to be shown, use box or card layout
                layout : {
                    type  : 'vbox',
                    align : 'stretch'
                },
                flex : 1,
                items: [    //typo, was 'item' but should be 'items'
                    {
                        xtype: 'panel',
                        flex: 1,
                        layout : 'fit', //needed a layout
                        items: [
                            {
                                xtype: 'panel',
                                docked: 'left', //use docked instead of dock
                                layout : 'fit', //needed a layout, or set the html to the panel and no children
                                width : 100, //needed a width
                                items: [{
                                    html: "blah blah blah"
                                }]
                            },
                            {
                                xtype: 'panel',
                                layout : 'fit', //needed a layout, or set the html to the panel and no children
                                items: [{
                                    html: "blah blah blah"
                                }]
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        flex: 1,
                        layout : 'fit', //needed a layout
                        items: [
                            {
                                xtype: 'panel',
                                docked: 'left', //use docked instead of dock
                                layout : 'fit', //needed a layout, or set the html to the panel and no children
                                width : 100, //needed a width
                                items: [{
                                    html: "blah blah blah"
                                }]
                            },
                            {
                                xtype: 'panel',
                                layout : 'fit', //needed a layout, or set the html to the panel and no children
                                items: [{
                                    html: "blah blah blah"
                                }]
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        flex: 1,
                        layout : 'fit', //needed a layout
                        items: [
                            {
                                xtype: 'panel',
                                docked: 'left', //use docked instead of dock
                                layout : 'fit', //needed a layout, or set the html to the panel and no children
                                width : 100, //needed a width
                                items: [{
                                    html: "blah blah blah"
                                }]
                            },
                            {
                                xtype: 'panel',
                                layout : 'fit', //needed a layout, or set the html to the panel and no children
                                items: [{
                                    html: "blah blah blah"
                                }]
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'toolbar',
                docked: 'bottom' //use docked not dock
            }
        ]
    });

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,604
    Answers
    3450
    Vote Rating
    818
    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


    You need to use layouts better. Here is your code with many comments:

    Code:
    Ext.create('Ext.Container', {
        fullscreen: true,
        layout: {
            type : 'vbox',
            align : 'stretch'
        },
        items: [
            {
                xtype: 'toolbar',
                docked: 'top' //use docked not dock
            },
            {
                xtype: 'panel',
                //layout: 'fit', //this will only allow one child to be shown, use box or card layout
                layout : {
                    type  : 'vbox',
                    align : 'stretch'
                },
                flex : 1,
                items: [    //typo, was 'item' but should be 'items'
                    {
                        xtype: 'panel',
                        flex: 1,
                        layout : 'fit', //needed a layout
                        items: [
                            {
                                xtype: 'panel',
                                docked: 'left', //use docked instead of dock
                                layout : 'fit', //needed a layout, or set the html to the panel and no children
                                width : 100, //needed a width
                                items: [{
                                    html: "blah blah blah"
                                }]
                            },
                            {
                                xtype: 'panel',
                                layout : 'fit', //needed a layout, or set the html to the panel and no children
                                items: [{
                                    html: "blah blah blah"
                                }]
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        flex: 1,
                        layout : 'fit', //needed a layout
                        items: [
                            {
                                xtype: 'panel',
                                docked: 'left', //use docked instead of dock
                                layout : 'fit', //needed a layout, or set the html to the panel and no children
                                width : 100, //needed a width
                                items: [{
                                    html: "blah blah blah"
                                }]
                            },
                            {
                                xtype: 'panel',
                                layout : 'fit', //needed a layout, or set the html to the panel and no children
                                items: [{
                                    html: "blah blah blah"
                                }]
                            }
                        ]
                    },
                    {
                        xtype: 'panel',
                        flex: 1,
                        layout : 'fit', //needed a layout
                        items: [
                            {
                                xtype: 'panel',
                                docked: 'left', //use docked instead of dock
                                layout : 'fit', //needed a layout, or set the html to the panel and no children
                                width : 100, //needed a width
                                items: [{
                                    html: "blah blah blah"
                                }]
                            },
                            {
                                xtype: 'panel',
                                layout : 'fit', //needed a layout, or set the html to the panel and no children
                                items: [{
                                    html: "blah blah blah"
                                }]
                            }
                        ]
                    }
                ]
            },
            {
                xtype: 'toolbar',
                docked: 'bottom' //use docked not dock
            }
        ]
    });
    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
    Sep 2011
    Posts
    38
    Vote Rating
    1
    howHardCanItBe is on a distinguished road

      0  

    Default


    Thanks for taking the time to mark it up, appreciate it.

Thread Participants: 1