似乎ExtJS 6中存在一个错误。问题只是通过这个fiddle中的一些代码重现。因此,我们有div
display=none
:
<div id="btn"></div>
<div style="display:none" id="outer_container">
<div id="test_container"></div>
</div>
然后我们将Button
呈现给btn
div,将Component
呈现给test_container
,如下所示:
var id = Ext.id();
Ext.create("Ext.Button",{
text: "show",
renderTo: "btn",
handler: function (){
document.getElementById("outer_container").style.display = "block";
//Ext.getCmp(id).setVisible(true) // does not help
}
});
Ext.create("Ext.container.Container", {
renderTo: "test_container",
width:"400",
border:"1",
id: id,
style:{
borderColor:"#000000",
borderStyle:"solid",
borderWidth:"1px"
},
layout:{type:"hbox"},
defaults:{labelWidth:"80"},
items:[
{"xtype":"numberfield", "name":"attr_1_"},{"xtype":"datefield","startDay":"1","format":"d.m.Y","name":"attr_2_"}
]
});
如果我们点击按钮使我们的组件可见,我们只会看到一条灰线,如果我们检查DOM,我们也会看到,该组件的高度和宽度都是零。解决问题的最佳方法是什么?
答案 0 :(得分:1)
如果您不一定要使用$
,则可以使用Ext.container.Container
。面板组件似乎在调用Ext.panel.Panel
后附加了样式信息。
然而,在单击处理程序中的按钮后,您必须更新布局。
updateLayout