Issues in migration from Extjs 4.0 Extjs 4.1: "Layout run failed"

[Periyasamy A]

var userSetup = new MyApp.view.ui.userSetup();
Ext.getCmp('centerPanel').add(userSetup);

The above code has to create user setup panel and the add to center panel in border layout home page.

when executing second line of code, the message throws like "Layout run failed"

[scottmartin]

Do you have a border layout?
You will need to provide a small working example for us to help.

Scott.

[swiji2000]

Hi Scott,
I am also facing same issue. When i am using border layout the page not display and console error is coming like 'Layout run failed'. when i am using 'fit' or 'anchor' layout the page is displayed but console error coming. ['Layout run failed'].

but my page design need to use border layout.

Note: ExtJs4 is working fine with same code. I am getting this issue When trying to integrate with ExtJs4.1

Thanks in advance

[scottmartin]

I will will need a small working example so I can pursue this matter.

Scott.

[Yacine BRITAH]

can anybody tell more about this border layout problem i have it too

[scottmartin]

Please provide a small test case so that we can have a look.

Scott.

[Yacine BRITAH]

Thank you Scoot i found why. I wanted to configure this border layout to a Panel as InitialView, it's ok with viewport. Thanks for reply!!

[hjones]

I was seeing the same warning message and lack of rendering when using a 'border' layout in my panel.
I have a simple Viewport with just the single Panel added to items.
Then my panel has a border layout set with two child panels - one in the north and one centered.

By changing from border to vbox it renders without the error.


I started to move the border layout up to the viewport and then had a thought.

My viewport had no layout set in its config...so I guess it was using 'auto' ?

So I decided to specify my viewport layout as 'fit' and tried again...this time it renders just fine.

So it looks like (at least with 4.1.2a) that you need to explicitly set the layout at the viewport...especially if you are using a panel with a border inside it.

[umenokin]

Hi guys. Using examples above i made implementation that works and looks fine in 4.2.1.
But then tree popup shown first time it throws an error[E] Layout run failed. After this it works fine. Just want to get rid of this error.

Source:

Ext.define("Ext.ux.form.field.TreeComboBox", {
    extend : "Ext.form.field.Picker",
    alias: 'widget.treecombobox',


    requires : [
        'Ext.data.TreeStore',
        'Ext.tree.Panel'
    ],


    mixins: {
        bindable: 'Ext.util.Bindable'
    },


    config: {
        store: null,
        displayField: 'text',
        useArrow: false
    },


    initComponent : function() {
        var self = this;
        Ext.apply(self, {
            fieldLabel : self.fieldLabel,
            labelWidth : self.labelWidth
        });
        self.addEvents('groupSelected');
        self.callParent();


        this.bindStore(this.getStore());
        this.getStore().load();
    },


    createPicker : function() {
        this.picker = new Ext.tree.Panel({
            height : 300,
            displayField: this.getDisplayField(),
            autoScroll : true,
            floating : true,
            focusOnToFront : false,
            shadow : true,
            ownerCt : this.ownerCt,
            useArrows : this.getUseArrow(),
            store : this.getStore(),
            frame: true,
            rootVisible : false,


            listeners: {
                'checkchange': function(node, checked) {
                    node.cascadeBy(function(n) {
                        n.set('checked', checked);
                    });


                    this.updateTextfield();
                },
                scope: this
            }
        });


        this.picker.on('beforehide', this.updateTextfield, this);


        return this.picker;
    },


    updateTextfield: function() {
        var names = [];
        this.getStore().getRootNode().cascadeBy(function(node) {
            if(node.get('checked')){
                names.push(node.get(this.getDisplayField()));
            }
        }, this);


        this.setValue(names.join(', '));
    },


    getStoreListeners: function() {
        return {
            load: this.onStoreLoad
        };
    },


    onStoreLoad: function() {
        this.updateTextfield();
    }
});

Updated class to update textfield automatically

[umenokin]

Made changes similar to ComboBox sources. Still shows an error [E] Layout run failed error then you open tree but at list list height does not limited by fixed value

Ext.define("Ext.ux.form.field.TreeComboBox", {    extend : "Ext.form.field.Picker",
    alias: 'widget.treecombobox',


    requires : [
        'Ext.data.TreeStore',
        'Ext.tree.Panel'
    ],


    mixins: {
        bindable: 'Ext.util.Bindable'
    },


    config: {
        store: null,
        displayField: 'text',
        useArrow: false
    },


    initComponent : function() {
        var self = this;
        Ext.apply(self, {
            fieldLabel : self.fieldLabel,
            labelWidth : self.labelWidth
        });
        self.addEvents('groupSelected');
        self.callParent();


        this.bindStore(this.getStore());
        this.getStore().load();
    },


    createPicker: function() {
        var me = this,
            picker,
            pickerCfg = Ext.apply({
                xtype: 'treepanel',
                displayField: this.getDisplayField(),
                autoScroll : true,
                floating : true,
                focusOnToFront : false,
                shadow : true,
                ownerCt : this.ownerCt,
                useArrows : this.getUseArrow(),
                store : this.getStore(),
                frame: true,
                rootVisible : false,


                listeners: {
                    'checkchange': function(node, checked) {
                        node.cascadeBy(function(n) {
                            n.set('checked', checked);
                        });


                        this.updateTextfield();
                    },
                    scope: this
                }
            }, me.listConfig, me.defaultListConfig);


        picker = me.picker = Ext.widget(pickerCfg);


        picker.on('beforehide', this.updateTextfield, this);


        return picker;
    },


    updateTextfield: function() {
        var names = [];
        this.getStore().getRootNode().cascadeBy(function(node) {
            if(node.get('checked')){
                names.push(node.get(this.getDisplayField()));
            }
        }, this);


        this.setValue(names.join(', '));
    },


    getStoreListeners: function() {
        return {
            load: this.onStoreLoad
        };
    },


    onStoreLoad: function() {
        this.updateTextfield();
    }
});