[4.2.0 beta 2] Auto layout issue
REQUIRED INFORMATION
Ext version tested: Browser versions tested against: DOCTYPE tested against: Description: - A simple operation - hiding a tool - causes relayouting of all the topper containers.
- The issue seems to be relevant to the default "auto" layout only, because setting up, for example, "fit" layout causes a container to be not relayouted.
- I should also say that I recently saw The Ext JS 4 Layout System presentation by Jamie Avins and, actually, I understand why layouting bubbles from a child. But I am not sure it should bubble in this case. Maybe it just requires a fix in the "auto" layout.
- I also understand that it can be very difficult to implement a generic way to determine parents should be relayouted or not. I just reported it to you to look at. Maybe, there is a bottleneck of performance.
Steps to reproduce the problem: The result that was expected: - Relayouting of the underlying Panel only
The result that occurs instead: - Relayouting of all the containers upward the hierarchy
Test Case:
Code:
<!DOCTYPE html>
<html>
<head>
<title>Auto layout issue</title>
<link rel="stylesheet" href="../resources/css/ext-all.css" />
<script src="../ext-all-debug.js"></script>
<script>
Ext.onReady(function () {
Ext.create("Ext.Viewport", {
renderTo: Ext.getBody(),
//layout: "fit", //this causes the Viewport to be not relayouted on hiding the tool
listeners: {
afterlayout: {
fn: function (item, layout) {
console.log('Viewport AfterLayout');
}
}
},
items: [{
xtype: "container",
//layout: "fit", //this causes the Container to be not relayouted on hiding the tool
listeners: {
afterlayout: {
fn: function (item, layout) {
console.log('Container AfterLayout');
}
}
},
items: [{
collapsible: true,
listeners: {
afterlayout: {
fn: function (item, layout) {
console.log('Panel AfterLayout');
}
}
},
items: [{
xtype: "button",
handler: function (btn) {
//Ext.suspendLayouts();
btn.up('panel').child('header').child("tool[type='collapse-top']").hide();
//Ext.resumeLayouts(); // it helps to avoid relayouting, but should I really use it explicitly?
},
text: "Hide Tool"
}]
}]
}]
});
});
</script>
</head>
<body>
</body>
</html>
