Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Sencha User
    Join Date
    Apr 2007
    Posts
    160
    Vote Rating
    0
    vladsch is on a distinguished road

      0  

    Default [OPEN-976] Hidden CompositeField in the FormPanel under Chrome

    [OPEN-976] Hidden CompositeField in the FormPanel under Chrome


    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:
    Code:
    <!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>

  2. #2
    Sencha User
    Join Date
    Aug 2008
    Posts
    101
    Vote Rating
    6
    FoxMulder900 is on a distinguished road

      0  

    Default


    I am having this same issue, anyone find anything out?

  3. #3
    Sencha User
    Join Date
    Aug 2008
    Posts
    101
    Vote Rating
    6
    FoxMulder900 is on a distinguished road

      0  

    Default


    I found this post, which solved my problem if anyone else needs this
    http://www.extjs.com/forum/showthrea...276#post466276

  4. #4
    Sencha User
    Join Date
    Mar 2007
    Posts
    22
    Vote Rating
    0
    Gerard Pastis is on a distinguished road

      0  

    Default


    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

    Code:
    <!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>
    Last edited by Gerard Pastis; 26 Aug 2010 at 8:54 AM. Reason: Adding new testcase

  5. #5
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    We'll have the fix to the margin applied for the next release.

  6. #6
    Sencha User
    Join Date
    Mar 2007
    Posts
    22
    Vote Rating
    0
    Gerard Pastis is on a distinguished road

      0  

    Default


    Ok, but the original probleme is about compositefield which is hidden in the config which can't be shown on Chrome, isn't it ?

  7. #7
    Sencha User
    Join Date
    Mar 2009
    Posts
    240
    Vote Rating
    0
    r_honey is on a distinguished road

      0  

    Default


    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.