There appears to be an issue with ExtJS 6 regarding a bug. The problem can be replicated with minimal code in this online demo. In the code snippet below, we have a hidden div:
<div id="btn"></div>
<div style="display:none" id="outer_container">
<div id="test_container"></div>
</div>
We are rendering a Button to the btn div and a Component to the test_container as shown:
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_"}
]
});
Upon clicking the button to display our component, only a gray line is visible and upon inspecting the DOM, it shows that the component has zero height and width. How should this issue be addressed?