I upgraded a Sencha ExtJs project from version 4.1.1 to the new released version 5.0.1 and now get
the error "[E] Layout run failed" in the webdev console.
In the older version everything works as expected.
The error message comes from the column layout, used in a container nested in the two filsets.
When I exchange the layout to e.g. vbox then no error occurs.
What is wrong in the following code which lets the layout run fail and how to fix it.
Thank's for every hints, tips or solutions.
The fiddle can be found at https://fiddle.sencha.com/#fiddle/8ov
Ext.onReady(function() {
Ext.create('Ext.form.FieldSet', {
title: 'Grouping Fieldset',
layout: 'anchor',
renderTo: Ext.getBody(),
items: [
{
xtype: 'fieldset',
title: 'Fieldset - 1',
layout: 'anchor',
width: '100%',
items: [
{
xtype: 'textfield'
},
/*...more input fields...*/
{
xtype: 'container',
layout: 'column',
width: '100%',
items: [
{
xtype: 'textfield',
width: 25
},
{
xtype: 'textfield',
width: 50
},
{
xtype: 'textfield'
}
]
}
]
},
{
xtype: 'fieldset',
title: 'Fieldset - 2',
layout: 'anchor',
items: [
{
xtype: 'textfield'
}
/*...more input fields...*/
]
}
]
});
});
The stack trace using Ext.Loader:
log Util.js:704
logx Util.js:744
Ext.apply.log.log.error Util.js:748
Ext.define.handleFailure Context.js:597
Ext.define.runComplete Context.js:1129
callOverrideParent Ext.js:58
Ext.Base.Base.addMembers.callParent Base.js:1256
Ext.override.runComplete Component.js:174
Ext.define.run Context.js:1120
Ext.define.statics.flushLayouts Component.js:182
Ext.define.statics.resumeLayouts Component.js:198
Ext.resumeLayouts Component.js:5948
Ext.define.render Renderable.js:685
Ext.define.constructor Component.js:1743
constructor Class.js:29
(anonymous function) VM1725:3
Ext.ClassManager.Ext.apply.create ClassManager.js:1413
Ext.define.launch Application.js:10
Ext.define.onBeforeLaunch Application.js:407
Ext.define.constructor Application.js:325
constructor Class.js:29
(anonymous function) Application.js:23
Ext.env.Ready.invoke Ready.js:271
Ext.env.Ready.invokeAll Ready.js:313
Ext.env.Ready.unblock Ready.js:445
Ext.apply.triggerReady Loader.js:761
Ext.apply.checkReady Loader.js:906
Ext.apply.load Loader.js:592
Ext.apply.require Loader.js:477
Ext.apply.triggerReady Loader.js:733
Ext.apply.checkReady Loader.js:906
Ext.apply.onLoadSuccess Loader.js:649
Ext.Boot.Request.notify bootstrap.js:904
Ext.Boot.Request.processLoadedEntries bootstrap.js:883
Ext.Boot.Request.loadEntries bootstrap.js:856
Ext.Boot.Boot.processRequest bootstrap.js:451
Ext.Boot.Boot.load bootstrap.js:472
Ext.Boot.Boot.requestComplete bootstrap.js:507
Ext.Boot.Request.notify bootstrap.js:908
Ext.Boot.Request.processLoadedEntries bootstrap.js:883
Ext.Boot.Entry.notifyRequests bootstrap.js:1328
me.fetch.complete bootstrap.js:1242
readyStateChange
Update
When I put every textfield in an own container the layout error is gone and the gui is
acting like expected.
But this is only a workaround...
The fiddle can be found at https://fiddle.sencha.com/#fiddle/8re
//...items of secound fieldset
{
xtype: 'container',
layout: 'column',
items: [
{
xtype: 'container',
items: [
{
xtype: 'textfield',
width: 50
}
]
},
{
xtype: 'container',
items: [
// ...nesting next textfield in container
Layout run failures often happen when you have an inner container (e.g., your "column" layout) with a stretched width INSIDE a parent container (e.g. your "anchor" layout) with a stretched width.
In short, the framework can't appropriately size things because it's all stretched. It could be your anchor layout, the column layout, or one of the other stretched things in there. This is commonly known as "over-nesting".
The top-level container in your code appears to be a fieldset - inside of which you have another fieldset (etc), and both have anchor layouts. More than likely you want to be using "hbox" or "vbox" layouts.
I faced the same problem with the column layout. After some hours of search I discovered that I should define the columnWidth for each component that is placed in the container that has the column layout.
It worked for me.
I have just rechecked the docs for column layout where they say:
ColumnLayout does not have any direct config options (other than inherited ones), but it does support a specific config property of columnWidth that can be included in the config of any panel added to it. The layout will use the columnWidth (if present) or width of each panel during layout to determine how to size each panel. If width or columnWidth is not specified for a given panel, its width will default to the panel's width (or auto).
For me it works only with columnWidth config. (I am using buttons instead of panels in the column container)
Related
I am trying to design a layout like the one shown in the image. I tried the following code
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
xtype: 'panel',
renderTo: Ext.getBody(),
defaults: {
// applied to each contained panel
bodyStyle: 'padding:20px'
},
items: [{
// This is the component A in layout image
xtype: 'textfield',
fieldLabel: 'Text-1'
},{
// This is the component B in layout image
xtype: 'textfield',
fieldLabel: 'Text-2'
},{
// This is the component C in layout image
xtype: 'textareafield',
fieldLabel: 'TextArea-1',
colspan: 2
}],
layout: {
type: 'table',
columns: 2,
align:'stretch'
},
});
}
});
But I'm not able to make the colspan work for the textarea field. The output of the above code looks something like this.
Can anyone please help me to make this one work?
PS: I tried emulating the table layout by creating a container - Hbox layout combination. That one works. But I still need to get this one working.
As #qmat suggests, you need to assign a percentage width to your textareafield, in order to give it the full width. The colspan is working as intended, but the textarea uses its standart width.
{
xtype: 'textareafield',
fieldLabel: 'TextArea-1',
width: "100%", // <- gives the textarea the full width
colspan: 2
}
The align:'stretch' config has no effect, it is not an actual config of the table layout.
See the ExtJs 4.2.5 docs and the working Sencha Fiddle.
Hope This will work for you.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.panel.Panel', {
xtype: 'panel',
renderTo: Ext.getBody(),
items: [{
// This is the component A in layout image
xtype: 'textfield',
width:250,
emptyText :'A'
},{
// This is the component B in layout image
xtype: 'textfield',
width:250,
emptyText :'B'
},{
// This is the component C in layout image
xtype: 'textfield',
width:500,
colspan:2,
emptyText :'C'
}],
layout: {
type: 'table',
columns: 2
},
});
}});
You can check the link below and adjust width size as your requirment. Also add css if you want.
https://fiddle.sencha.com/#fiddle/1at3
I am using extjs to build a portal and I have the following problem. The images are more than the height of the tab (on the right size). What I want is to add a vertical scroll bar on this tab. How can I do this in extjs?
This is the part of my code:
items: [{
xtype: 'tabpanel',
activeTab: 0,
flex: 2,
items: [{
xtype: 'panel',
title: 'Images',
items: [{contentEl:'img',autoScoll: true,height:11200,overflowY : String }]
},{
xtype: 'panel',
title: 'Material',
items: [{contentEl:'msg',autoScoll: true,height:11200,overflowY : String }]
}]
}]
Thanks.
I can see in your code autoScoll instead of autoScroll: true.
It seems to be a typo.
Check this out.
Try adding layout:fit and autoScroll:true.
Have you tried this -
overflowY: 'scroll'
Here's what it says in the documentation -
'scroll' to always enable vertical scrollbar (Style overflow-y:
'scroll').
http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.Component-cfg-overflowY
For ExtJS 6 you can use Ext.panel.Panel.scrollable.
To enable vertical scroll you can set it as scrollable: 'vertical'.
To force vertical scroll regardless of content you can pass Ext.scroll.Scroller config:
scrollable: {
y: 'scroll'
}
I want to add Ext.button.Split into panel's header instead of title. It must be something like switcher of a panel's content and title of the same panel together.
Is there any option in extjs 4 to do that? Or is there better solution instead of Split button? Unfortunately, switcher in panel header is the key requirement, so it must be placed there.
Below works for me ExtJs 4.2.2
{
xtype: 'panel',
......
header: {
titlePosition: 0,
items: [
{
xtype: 'splitbutton',
}
]
}
}
Add the header object to your panel with your tools and add items for buttons.
Ext.create('Ext.panel.Panel', {
width: 300,
height: 200,
renderTo: Ext.getBody(),
header: {
// if you want your button positioned on the right hand side add
// titlePosition: 0,
items: [{
xtype: 'splitbutton',
text: 'test'
}]
}
});
I faced the following problem:
I'm using ExtJS tabpanel control and I want the tab headers to span the whole container, ie - if there are two tabs, their tab headers width should be 50% of the tabpanel width. I can't manage to do this.
Could someone help me?
Just apply this
tabBar: {
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: { flex: 1 }
},
to your tabpanel configuration.
Note: This will only work for tabPosition 'top' and 'bottom'!
In my project, I am trying to position a container as absolute. but if I do so, it is also effecting the neighbour items. I mean, after positioning the container, if I give some width and height to that particular container, it is effecting all the toolbar. (which I don't want to happen). This effect is happening even if I use layout: 'absolute or css position:absolute.
Here is my related code:
xtype: 'panel',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
height: 40,
items: [
{
//only this should be absolute positioned
xtype: 'container',
cls: 'logo', //tried with applying css styles !important
//even tried with layout: 'absolute'
},'-',
//the below elements should not move their position
//even if the above one has been applied positioning.
{
xtype: 'container'
},'->',
{
xtype: 'container'
}]
}],
Here my goal is to bring the container out of the toolbar because it should have greater height than the toolbar keeping other containers constant.
If the profile pic container has to be higher than the toolbar, it can't be a child of the toolbar container.
You could create a container with absolute layout below the toolbar, in that container you will have the profile pic and you can use a negative Y variable in order to move up the image, so it looks like is in the toolbar.
Just like this
var toolbar = Ext.create('Ext.toolbar.Toolbar', {
items: [
{},
{ xtype: 'tbspacer', width: 50 }, // Moving the button to the right
{ text: 'Fake Name Button' }
]
});
Ext.create('Ext.container.Container', {
layout: 'fit',
width : 700,
renderTo: Ext.getBody(),
items: [toolbar]
});
var image = Ext.create('Ext.Img', {
x: 0,
y: -25,
maxWidth: 70,
src: 'https://twimg0-a.akamaihd.net/profile_images/1471554494/swel.png'
});
Ext.create('Ext.container.Container', {
layout: {
type: 'absolute'
},
renderTo: Ext.getBody(),
items: [image]
});
http://jsfiddle.net/alexrom7/33cP8/1/
This solution is not so pretty, but it might work.