Layout issue (container above tabpanel)

[DougMcDonald]

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:

            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'

    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

[crysfel]

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

[Zdeno]

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.

[DougMcDonald]

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

[DougMcDonald]

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

xtype: 'panel',
layout: 'vbox',
pack: 'bla',
align: 'bla

rather than:

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