我在使用ExtJS布局运动员时遇到了一些问题。
我需要渲染一些非常重要的组件视图。 这些视图位于屏幕的中央(边框布局),而左侧有一个菜单栏。
出于某种原因,在添加了视图的最后部分(+ - 10个组件)后,我不断获得布局运行失败的语句。
我尝试添加调试脚本,但我得到的是:
[E] ----------------- FAILURE ----------------- ext-dev.js:11626
log ext-dev.js:11626
Ext.define.run Context.js:374
Ext.define.statics.flushLayouts AbstractComponent.js:85
Ext.define.statics.resumeLayouts AbstractComponent.js:101
Ext.resumeLayouts AbstractComponent.js:3557
(anonymous function)
甚至更少......
我在整个代码中使用Ext.suspendLayouts()
en Ext.resumeLayouts(true)
来使应用程序的某些部分更顺畅。 (另外,在同时更新组件时存在一些性能问题 - 例如,如容器/面板的show()
那样)
但我不认为这个问题与此有关。
我在控制台中也收到了很多“[W]坏!......”的警告,但是通过sencha论坛,我发现其中一个开发者说这不是什么大问题。< / p>
警告示例:
[W] BAD! radiogroup-1214.contentHeight set by radiogroup-1214<fieldcontainer> and radiogroup-1214<vbox> ext-dev.js:11626
[W] BAD! container-1064.containerChildrenDone set by selectBox-1072<combobox> and label-1065<autocomponent> ext-dev.js:11626
[W] BAD! container-1064.childrenDone set by selectBox-1072<combobox> and label-1065<autocomponent> ext-dev.js:11626
[W] BAD! container-1207.containerChildrenDone set by radiogroup-1211<fieldcontainer> and radiogroup-1214<fieldcontainer> ext-dev.js:11626
[W] BAD! container-1207.childrenDone set by radiogroup-1211<fieldcontainer> and radiogroup-1214<fieldcontainer> ext-dev.js:11626
[W] BAD! radiogroup-1242.contentWidth set by radiogroup-1242<fieldcontainer> and radiogroup-1242<hbox> ext-dev.js:11626
[W] BAD! radiogroup-1242.contentHeight set by radiogroup-1242<fieldcontainer> and radiogroup-1242<hbox> ext-dev.js:11626
[W] BAD! radiogroup-1246.contentWidth set by radiogroup-1246<fieldcontainer> and radiogroup-1246<hbox> ext-dev.js:11626
[W] BAD! radiogroup-1246.contentHeight set by radiogroup-1246<fieldcontainer> and radiogroup-1246<hbox> ext-dev.js:11626
[W] BAD! radiogroup-1249.contentWidth set by radiogroup-1249<fieldcontainer> and radiogroup-1249<hbox>
我还使用了与Extjs一起打包的页面分析器来找到解决方案但是所有这些让我觉得引擎无法计算主容器的高度。
奇怪的是,只有当我添加最终视图时才会发生这种情况,如果不这样做,布局运行得很好。
我知道你在想什么:然后查看最后一个视图? 嗯,我也这样做了,我甚至用一个空面板替换它。如果我这样做,就没有问题。 但第二个我放了一个radiogroup,radiobuttons,一个fieldset,......在那里布局再次搞砸了。
有人可以就如何进一步诊断此问题向我提供一些建议吗? 您可以使用任何提示/技巧找出问题的确切位置? (因为这是我的主要问题,我不知道在哪里看!)
点检查:
flex: 1
添加到我的商品中,因为我读到这可能有所帮助。它没有。非常感谢任何正确方向的提示。
修改 这是我的一段代码,它是一个简单的视图。 我认为问题可能出在这一部分。
Ext.define("App.crashing.Container",{
extend: "Ext.container.Container",
layout: {type: "vbox", align: "stretch"},
minWidth: 800,
defaults:
{
labelSeparator: ""
},
items:
[
{
xtype:"displayfield",
value: "<hr />"
},
{
xtype:"radiogroup",
flex: 1,
layout: "hbox",
fieldLabel: "label",
labelWidth: 400,
width: 450,
items:
[
{
xtype:"radio",
boxLabel: "Yes",
inputValue: true,
margin: "0 10 0 0",
name: "name1",
},
{
xtype: "radio",
boxLabel: "No",
name: "name1"
}
]
},
{
xtype:"fieldset",
hidden: true,
flex: 1,
title: "",
layout: "vbox",
items:
[
{
xtype: "textfield",
fieldLabel: "Name",
margin: "10 0 0 0",
labelWidth: 150,
width: 350,
labelSeparator: "*"
},
{
xtype: "textfield",
fieldLabel: "label ",
labelWidth: 150,
width: 350,
labelSeparator: "*"
}
]
}
]
});
仅显示单选按钮时视图中没有问题。 如果显示了字段集,然后我调整了视图大小,则会出现布局错误。