PDA

View Full Version : [4.1.3] Problem with visibility inside a layout



ediexts
18 Dec 2012, 3:26 AM
REQUIREDINFORMATION Ext version tested:

Ext 4.1 rev 3
Browser versions tested against:

Chrome 23
IE9
FF17 (firebug 1.11.1 installed)
Description:

Inside a panel with a vbox layout, if all items are hidden and have hideMode = visibility except for the last one, they don't gain the visibility: hidden style. The last item is placed as it's the first one. If i remove the layout property from the panel, the items will be placed correctly.
Steps to reproduce the problem:

create a panel with some items hidden = true, hideMode = visibility and the last one must have hidden = false;
try to remove the layout property from the panel to see this works correctly
The result that was expected:

the last item should be places after # spaces
The result that occurs instead:

the last item is places as first element of the panel
Test Case:


Ext.create("Ext.panel.Panel", {
title: "MyPanel",
width: 100,
height: 200,
layout: "vbox",
items: [{
xtype:"button",
id:"button1",
hideMode:"visibility",
hidden:true,
style: "margin:5px;",
text: "Button1"
}, {
xtype: "button",
id:"button2",
hideMode:"visibility",
hidden:true,
style: "margin:5px;",
text: "Button2"
}, {
xtype: "button",
id:"button3",
hideMode:"visibility",
hidden:true,
style: "margin:5px;",
text: "Button3"
}, {
xtype: "button",
id:"button4",
hideMode:"visibility",
hidden:true,
style: "margin:5px;",
text: "Button4"
}, {
xtype: "button",
id:"button5",
hideMode:"visibility",
hidden:false,
style: "margin:5px;",
text: "Button5",
handler: function() {
if(Ext.getCmp("button1").isHidden() == true) {
Ext.getCmp("button1").show();
Ext.getCmp("button2").show();
Ext.getCmp("button3").show();
Ext.getCmp("button4").show();
}
else {
Ext.getCmp("button1").hide();
Ext.getCmp("button2").hide();
Ext.getCmp("button3").hide();
Ext.getCmp("button4").hide();
}
return;
}
}],
renderTo:Ext.getBody()
});


HELPFULINFORMATION

Screenshot or video:

40856
Possible fix:

not provided
Additional CSS used:

only default ext-all.css
Operating System:

OpenSuse 11.4
Win7 Pro

Animal
18 Dec 2012, 4:12 AM
If you want to use "natural" flowing layout which takes this into account, do not use box layout.

Box layout omits hidden components from its layout operation.

ediexts
19 Dec 2012, 1:02 AM
In my code, i use table layout and the result is the same as the example.

I have some panels side by side and inside each of them i have some form fields.
Each fields could be hide/show by users and i want to keep them horizontally aligned (to have the same field in the same row for all the panels).

After rendering the page, with table layout, if i try to show an hidden field, it won't show.
If i use a box layout, items will be shown.