PDA

View Full Version : [INFOREQ] Problem with hidden panels when change its visibility



gian_p
20 Jul 2010, 4:22 AM
Browser Versions:
Chrome 5.0.375.99
Safari 3.2.2



We found a bug, that when the components are renderized with the property "hidden: true", and when we call the method show() or setVisible(true) of the components, the component does not show itself. This issue occurs on the browsers chrome and safari.

We does not found a generic rule for this bug, in some cases the component appears, and in others they remains invisible. Looking at the DOM, we realized that when the component remains invisible, even after call show() (of the component), the style "display: none" remains in the component's element style.

But when we do this:

component.getEl().show();
component.show();

After calling show of the element explicitly, everything works fine using setVisible, show and hidden of the component.
Our original situation, is on the Panel component (but it is too complex), so we created an isolated situation with FieldSet that extends Panel.

This scenario can reproduce the problem, it has two panels with one button, one of this buttons just call fieldset.show(), and the other button calls fieldset.getEl().show() and fieldset.show()

Take a look:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css"
href="./ext/resources/css/ext-all.css">
<script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext/ext-all-debug.js"></script>
<script type="text/javascript" src="applayout.js"></script>
<!-- A Localization Script File comes here -->
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = './ext/resources/images/default/s.gif';
Ext.onReady(function() {

var viewPort = new Ext.Viewport({
});

var combo = new Ext.form.ComboBox( {
hiddenName : 'cbx',
fieldLabel : 'Combo',
store : [ [ 'a', 'A' ], [ 'b', 'B' ] ],
mode : 'local',
selectOnFocus : true,
triggerAction : 'all',
emptyText : 'Select something...',
forceSelection : true,
allowBlank : false,
listeners : {
'select' : function() {
fieldSet.setVisible(true);
}
}
});

var fieldSet = new Ext.form.FieldSet( {
title : 'FieldSet',
hidden : true,
defaults : {
layout : 'form',
columnWidth : .5,
border : false,
layoutConfig : {
trackLabels : true
}
},
items : [ {
items : [ {
xtype : 'textfield',
fieldLabel : 'TextField'
} ]
}, {
items : [ {
xtype : 'numberfield',
fieldLabel : 'NumberField'
} ]
} ]
});

var form = new Ext.FormPanel( {
border : false,
padding : '10px',
labelWidth : 150,
renderTo : Ext.getBody(),
layoutConfig : {
trackLabels : true
},
defaults : {
autoWidth : true,
border : true,
collapsible : true,
layout : 'column'
},
items : [ combo, fieldSet ]
});

var pn1 = new Ext.Panel( {
frame : true,
width : 200,
height : 150,
hidden : false,
html : 'with fieldSet.getEl().show(); line',
bodyStyle : 'padding:10px 15px;',
header : false,
items : [ {
xtype : 'button',
text : 'action',
handler : function() {
fieldSet.setVisible(true);
fieldSet.show();
fieldSet.getEl().show();
viewPort.doLayout();
}
} ]
});

var pn2 = new Ext.Panel( {
frame : true,
width : 200,
height : 150,
hidden : false,
html : 'whithout fieldSet.getEl().show(); line',
bodyStyle : 'padding:10px 15px;',
header : false,
items : [ {
xtype : 'button',
text : 'action',
handler : function() {
fieldSet.setVisible(true);
fieldSet.show();
viewPort.doLayout();
}
} ]
});

viewPort.add(combo);
viewPort.add(fieldSet);
viewPort.add(form);
viewPort.add(pn1);
viewPort.add(pn2);

viewPort.doLayout();
});
</script>
<title>Application Layout Tutorial</title>
</head>
<body>
</body>
</html>

evant
20 Jul 2010, 5:38 AM
In what version? I'm not seeing this behaviour in the SVN build.

gian_p
20 Jul 2010, 7:55 AM
Hi

the version that we are using, I've downloaded in may 19, version 3.2.1
Ill try update the source and verify if it's still occurring

jakehurst
2 Nov 2010, 10:14 AM
This occurs also in 3.2.2. The workaround above
comp.getEl().show(); comp.show(); works. It would be nice if that fix made it into 3.3 or later, if it still occurs. Can a Sencha Dev confirm if it is fixed in a later release?