Question

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

Answer 1

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

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

updateLayout

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

1 个答案: