1. #1
    Sencha User
    Join Date
    Apr 2011
    Posts
    21
    Vote Rating
    0
    DougMcDonald is on a distinguished road

      0  

    Default Layout issue (container above tabpanel)

    Layout issue (container above tabpanel)


    Hi all,

    I'm having a bit of an issue getting a particular layout to work as expected. At the root level I have a panel and I wish this to contain a 'container' (with a couple of combos) and below this a tab panel.

    What is odd is that if I put the container below the tabpanel, the layout of the panel expands to contain all the elements (as I'd expect) but if I put the container above, the panel cuts itself short (see screenshot).

    Do I have something wrong in the properties/configs of these elements? as far as I can see they all seem pretty vanilla in how I've implemented them.

    If it's any help, here's the code:

    This is the items collection in question, begins with a panel, has a function to create the first item in the panel (the container with the two combos) and then a tab panel below:
    Code:
                items: [{
                    xtype: 'panel',
                    layout: 'fit',
                    bodyPadding: 10,
                    border: false,
                    items: [
                        this.createTypeIssueControls(),
                    {
                        xtype: 'tabpanel',
                        items: [
                        //to keep the code down I've removed the function which creates my 'details' panel here
                        {
                            title: 'Annex A',
                            items: [{
                                xtype: 'panel',
                                title: 'soup',
                                height: 200
                            }]
                        },
                        {
                            title: 'Annex B',
                            items: [{
                                xtype: 'panel',
                                title: 'green eggs',
                                height: 200
                            }]
                        },
                        {
                            title: 'Annex C',
                            items: [{
                                xtype: 'panel',
                                title: 'ham',
                                height: 200
                            }]
                        },
                        {
                            title: 'Annex D',
                            items: [{
                                xtype: 'panel',
                                title: 'badger',
                                height: 200
                            }]
                        }] // END TABPANEL ITEMS
                    }] //END DETAIL PANEL
                }]
    Just for completeness, this is the method 'createTypeIssueControls'

    Code:
        createTypeIssueControls: function () {
    
    
            return {
                xtype: 'panel',
                layout: 'column',
                bodyPadding: 10,
                margin: '0 0 10 0',
                items: [{
                    columnWidth: 0.5,
                    border: false,
                    items: [{
                        xtype: 'combobox',
                        fieldLabel: 'Certificate Type',
                        id: 'certTypeId',
                        name: 'certTypeId',
                        store: this.certTypeStore,
                        displayField: 'Name',
                        valueField: 'Id'
                    }]
                },
                {
                    columnWidth: 0.5,
                    border: false,
                    items: [{
                        xtype: 'combobox',
                        fieldLabel: 'Issue',
                        id: 'issueNumber',
                        name: 'issueNumber',
                        store: this.certificateStore,
                        displayField: 'Number',
                        valueField: 'Id'
                    }]
                }]
            };
        }
    Here is the explanatory screenshot:

    ExtLayout.png

  2. #2
    Sencha Premium Member crysfel's Avatar
    Join Date
    Feb 2008
    Location
    New York, USA
    Posts
    218
    Vote Rating
    8
    crysfel will become famous soon enough

      0  

    Default


    Try to use the 'vbox' layout instead of the 'fit' layout for the main container. The 'fit' layout only allows you to show one child at the time.

    Regards

  3. #3
    Sencha Premium Member Zdeno's Avatar
    Join Date
    Nov 2009
    Location
    Prague
    Posts
    547
    Vote Rating
    36
    Zdeno has a spectacular aura about Zdeno has a spectacular aura about

      0  

    Default


    Yep try vbox or border layout. You can check http://dev.sencha.com/deploy/ext-4.0...t-browser.html. Maybe you find example which will be the best for you.

  4. #4
    Sencha User
    Join Date
    Apr 2011
    Posts
    21
    Vote Rating
    0
    DougMcDonald is on a distinguished road

      0  

    Default


    Hi Guys,

    Thanks for the pointers, I've tried flipping the main panel to either border (and putting the children as 'north' and 'center') or switching to vbox and defining an explicit height on both components.

    Both of these seem to throw a 'Layout run failed' error.

    I will see if I can rework things a bit an find out where the issue lies here, the error makes me think that I've nested something incorrectly for the suggested layout types.

    Cheers,

    Doug

  5. #5
    Sencha User
    Join Date
    Apr 2011
    Posts
    21
    Vote Rating
    0
    DougMcDonald is on a distinguished road

      0  

    Default


    Aha, fixed it, I was being a fool and trying to define vbox layout config properties as properties of the parent panel e.g

    Code:
    xtype: 'panel',
    layout: 'vbox',
    pack: 'bla',
    align: 'bla
    rather than:

    Code:
    xtype: 'panel',
    layout: {
        type: 'vbox',
        pack: 'bla',
        align: 'bla
    }

Thread Participants: 2

Tags for this Thread