PDA

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



Periyasamy A
25 Jun 2012, 10:46 PM
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
27 Jun 2012, 9:20 AM
Do you have a border layout?
You will need to provide a small working example for us to help.

Scott.

swiji2000
4 Jul 2012, 10:10 PM
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
5 Jul 2012, 6:06 AM
I will will need a small working example so I can pursue this matter.

Scott.

Yacine BRITAH
19 Nov 2012, 1:25 AM
can anybody tell more about this border layout problem i have it too

scottmartin
19 Nov 2012, 7:55 AM
Please provide a small test case so that we can have a look.

Scott.

Yacine BRITAH
19 Nov 2012, 8:48 AM
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
20 Dec 2012, 8:54 AM
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
4 Jun 2013, 6:42 PM
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
4 Jun 2013, 11:23 PM
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();
}
});

andersoninfidelitysencha
21 Oct 2013, 12:28 AM
The mainly issue is the layout issue during the upgrade from Extjs4.0.7 to Extjs4.2.1, right?