Layout run failed Extjs

Question

I'm using border layout in Extjs4.0. It was working fine there. When I upgrade my library to extjs4.1, its showing error like layout run failed, and the panel is not loading. I didn't came across such error, so help me to resolve this error.

My code is

Ext.define('TextFit', {
    extend : 'Ext.container.Container',
    title: 'Sample text',
    layout: {
        type : 'border'
    },
    items : [{
        title : 'left panel',
        region : 'west'
    },{
        title : 'Center panel',
        region: 'center'
    }]
});

Thanks in advance.

I ran this code but I didn't get any error. When you get this error? — Wilk, Sep 17 '12 at 17:41
Maybe you can look at this answer that explain why a layout can fail: [link](http://stackoverflow.com/questions/11533769/understanding-layout-run-failure-error-logging) — Valentino Dell'Aica, Nov 26 '12 at 08:31

score 11 · Answer 1 · answered May 01 '13 at 15:16

11

Try adding

layout: 'fit'

To your border layout's parent container. I had the same problem and this solved it for me.

answered May 01 '13 at 15:16

Brett

2,775
4
27
32

Thanks! This was the issue for me as well. – Yohan Liyanage Aug 05 '13 at 09:52
Same issue i was going through. Thanks – Yash Vekaria Sep 30 '14 at 06:29

score 2 · Answer 2 · answered Feb 27 '14 at 17:01

2

From BorderLayout's documentation:

Any child items with a region of west or east may be configured with either an initial width, or a Ext.layout.container.Box.flex value, or an initial percentage width string (Which is simply divided by 100 and used as a flex value). The 'center' region has a flex value of 1.

Similarly for north and south, but height instead of width.

answered Feb 27 '14 at 17:01

David Easley

1,347
1
16
24

This is why it is failing. Just add a width to the west panel or set a flex – Jonathan Morales Vélez Jul 29 '14 at 13:01

score 1 · Answer 3 · answered Nov 03 '14 at 13:14

i had this problem while trying to add a complex set of (deep nested) items to a panel before rendering the panel. Once i added the items after the panel knew it's dimensions, it worked:

addItems: function() {
    this.on("boxready", function(){ this.add(items); }, this, {single: true});  
}

score 0 · Answer 4 · answered Mar 27 '13 at 13:57

0

Try to add flex property to both items ... so the modified code will be

....

items : [{
    title : 'left panel',
    region : 'west',
flex:1 //add here
},{
    title : 'Center panel',
    region: 'center',
flex:1 //and here
}]

......

answered Mar 27 '13 at 13:57

ram mere

215
5
17

score 0 · Answer 5 · answered Mar 29 '13 at 13:48

You could try using:

 <script type="text/javascript" src="extjs/src/diag/layout/Context.js"></script>
 <script type="text/javascript" src="extjs/src/diag/layout/ContextItem.js"></script>

just put this in your index.html and check the console to see if there are any errors in there. Don't mind most of the warnings you see.

If there are errors like: "... is still connected/attached" then look at that item and make sure it has a layout other than anchor.

If you don't have any errors in the console and there is still a layout issue, you could try using the page analyzer.

You should be able to find the analyser in your extjs zip. If it is deployed on your server you could go to: http://< server-address >/extjs/examples/page-analyzer/page-analyzer.html

Layout run failed Extjs

5 Answers5