PDA

View Full Version : [OPEN-976] Hidden CompositeField in the FormPanel under Chrome



vladsch
18 May 2010, 1:59 AM
Hi,

ExtJS: 3.2.1
Browser: Chrome

If you place hidden composite field to the form panel and try to make it visible then composite field is not shown. It is reproducible under Chrome only

Test case:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Composite Fields</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
new Ext.form.FormPanel({
renderTo: "docbody",
layoutConfig: {trackLabels: true},
items: [{
id: "Field1",
xtype: "compositefield",
fieldLabel: "Field1",
items: [new Ext.form.TextField({
xtype: "textfield"
}), new Ext.form.DisplayField({
xtype: "displayfield",
value: "Label"
}), new Ext.form.TextField({
xtype: "textfield"
})]
},
{
id: "Field2",
xtype: "compositefield",
fieldLabel: "Field2",
hidden: true,
items: [new Ext.form.TextField({
xtype: "textfield"
}), new Ext.form.DisplayField({
xtype: "displayfield",
value: "Label"
}), new Ext.form.TextField({
xtype: "textfield"
})]
}]
});

new Ext.Button({
renderTo: "docbody",
text: "Show Field2",
listeners: {
click: {
fn: function (el, e) {
Ext.getCmp("Field2").show();
}
}
}
});
});
</script>
</head>
<body id="docbody">

</body>
</html>

FoxMulder900
26 May 2010, 12:28 PM
I am having this same issue, anyone find anything out?

FoxMulder900
26 May 2010, 12:55 PM
I found this post, which solved my problem if anyone else needs this
http://www.extjs.com/forum/showthread.php?96686-INFOREQ-Set-visible-fieldset-in-Chrome-4.1-(ExtJS-3.2)&p=466276#post466276

Gerard Pastis
26 Aug 2010, 8:40 AM
The problem is still relevant !
FoxMulder's link is usefull but can it be fixed in the 3.2.x ?
Thx :)

Test this testcase under Chrome and FF to compare


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Hide Hidden Composite testcase</title>

<link rel="stylesheet" type="text/css" href="http://www.sencha.com/deploy/dev/resources/css/ext-all.css" />

<script type="text/javascript" src="http://www.sencha.com/deploy/dev/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://www.sencha.com/deploy/dev/ext-all.js"></script>

<script type="text/javascript">
Ext.onReady(function() {

var formPanel = new Ext.form.FormPanel({
items: [{
xtype: 'fieldset',
title: 'Title',
items: [
{
xtype: 'compositefield',
ref: '../field1',
hidden: true,
fieldLabel: 'Compositefield',
items: [
{
xtype: 'textfield'
},{
xtype: 'textfield'
}
]
},{
xtype: 'compositefield',
ref: '../field2',
fieldLabel: 'Compositefield',
items: [
{
xtype: 'textfield'
},{
xtype: 'textfield'
}
]
}
]
}],
tbar: [
{
text: 'Hide',
handler: function() {
formPanel.field1.hide();
formPanel.field2.hide();
}
},{
text: 'Show',
handler: function() {
formPanel.field1.show();
formPanel.field2.show();
}
}
]
});

new Ext.Viewport({
layout: "fit",
items: formPanel
});
});

</script>
</head>
<body>
</body>
</html>

Jamie Avins
26 Aug 2010, 3:21 PM
We'll have the fix to the margin applied for the next release.

Gerard Pastis
27 Aug 2010, 12:18 AM
Ok, but the original probleme is about compositefield which is hidden in the config which can't be shown on Chrome, isn't it ?

r_honey
16 Sep 2010, 1:38 AM
Yes, the issue still exists. My current fix is to call doLayout() manually on the composite field after making it visible in code, which makes it work and show child components.