Ext JS 4.2.1 Layout run failed

Question

I just want to create a layout where i've defined my custom application header.. and them some content beneath.. e.g. a border layout...

Ext.define('app.view.Main', {
    extend: 'Ext.container.Container',
    requires:[
        'Ext.tab.Panel',
        'Ext.layout.container.Border',
        'Ext.layout.container.Anchor',
        'Ext.form.field.Text'
    ],

    xtype: 'app-main',

    layout: { type: 'anchor' },

    items: [
        { xtype: 'app-header' },
        {
            //xtype: 'container',
            layout: 'border',
            items: [{
                region: 'west',
                xtype: 'panel',
                title: 'west',
                width: 150
            }, {
                region: 'center',
                xtype: 'tabpanel',
                items: [{ ...

this code is always returning the error Layout run failed... When i change the layout of my second item which should be a border it works.. Somehow it doesnt get along with the border layout...

Can someone tell me why? A hint for a solution would be nice too :) I am an ext js layout newb :(

A border layout requires a fixed (or calculated) size. Where is view.app.Main used? Why an anchor layout? — Evan Trimboli
like i said i am newb... ^^ my main layout is used in my viewport.. (i just created the app with sencha cmd..) i do want to have my custom application header and the content beneath.. whats the best way to do something like this? which layout should i use? — JuHwon
border layouts in extjs are a total nightmare! They seem to exist just to produce layout run failures! — JonnyRaa
@EvanTrimboli how would you configure the width + height if you have a border layout as one of the components in a hbox and you just want it to use the width + height available? I tried using flex : 1 but that causes the layout run problem again — JonnyRaa

Evan Trimboli Evan Trimboli · Accepted Answer · 2013-06-17T12:59:57

To create a header with a top header:

new Ext.container.Viewport({
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    items: [{
        xtype: 'app-header'
    }, {
        flex: 1,
        layout: 'border',
        xtype: 'container',
        items: [] // border stuff
    }]
});

Ext JS 4.2.1 Layout run failed

1 Answers