将容器渲染到隐藏的div然后设置可见失败

时间:2017-04-28 07:36:55

标签: javascript extjs

似乎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,我们也会看到,该组件的高度和宽度都是零。解决问题的最佳方法是什么?

1 个答案:

答案 0 :(得分:1)

如果您不一定要使用$,则可以使用Ext.container.Container。面板组件似乎在调用Ext.panel.Panel后附加了样式信息。

然而,在单击处理程序中的按钮后,您必须更新布局。

updateLayout