1. #1
    Ext User
    Join Date
    Mar 2007
    Posts
    52
    Vote Rating
    2
    exo is on a distinguished road

      0  

    Default Formfields wont show when in column nested in fieldset (nested in tab)

    Formfields wont show when in column nested in fieldset (nested in tab)


    Hi. I'm thinking this could be a bug. Is this a known error, or am I doing something wrong?

    The situation is this.
    I have a ViewPort
    with a Region in it
    with a FormPanel in it
    with a Fieldset on it
    with two columns in it
    with a couple of form fields in them

    I drew a schematic, see attachment structure.jpg.

    The problem is this In IE7 the form fields are invisible. I dug through the dom and it seems they have a width of 0. In Firefox it seems to work.

    The code is attached and can be dropped to the examples folder if anyone feels like helping out this poor soul. Also I'll post it here maybe someone sees the error right away.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title>Where are my form 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>
    
    </head>
    <body>
    	<script type="text/javascript">
    		Ext.onReady(function(){
    			var viewPort = new Ext.Viewport({
    				items: [{
    					region: 'north',
    					html: '<h1 class="x-panel-header">header</h1>',
    					autoHeight: true,
    					border: false,
    					margins: '0 0 5 0'
    				}, {
    					region: 'center',
    					xtype: 'tabpanel',
    					activeTab: 0,
    					items: [{
    						title: 'Search',
    						bodyStyle: 'padding: 5px 5px 0',
    						autoHeight:true,
    
    						items: [{
    							xtype:'fieldset',
    							title: 'Basic',
    							layout: 'column',
    							autoHeight:true,
    							autoWidth:true,
    							anchor:'100%',
    							collapsible: true,
    							items:[{
    								layout:'column',
    								defaults: { border: false, anchor: '98%' },
    								items:[{
    									columnWidth:.5,
    									layout: 'form',
    									defaults: { anchor: '98%', xtype: 'textfield' },
    									items: [{
    										fieldLabel: 'ID',
    										name: 'Identifier'
    									},{
    										fieldLabel: 'Name',
    										name: 'Risk_Name'
    									}, {
    										fieldLabel: 'Assessor',
    										name: 'Owner',
    										xtype: 'combo',
    										valueField: 'name',
    										displayField: 'name',
    										triggerAction: 'all',
    										queryParam: 'prefix',
    										store: [['1', 'A'], ['2', 'B'], ['3', 'C']]
    									}, {
    										fieldLabel: 'Catalogue',
    										name: 'Catalogue_ID',
    										xtype: 'combo',
    										valueField: 'id',
    										displayField: 'name',
    										forceSelection: true,
    										triggerAction: 'all',
    										queryParam: 'prefix',
    										store: [['1', 'A'], ['2', 'B'], ['3', 'C']]
    									}]
    								}, {
    									columnWidth:.5,
    									layout: 'form',
    									defaults: { anchor: '98%' },
    									items: [ {
    										xtype: 'radiogroup',
    										fieldLabel: 'Approved',
    										items: [
    											{boxLabel: 'Yes', name: 'Approved', inputValue: 1},
    											{boxLabel: 'No', name: 'Approved', inputValue: 0},
    											{boxLabel: 'All', name: 'Approved', inputValue: '', checked: true}
    										]
    									}, {
    										xtype: 'radiogroup',
    										fieldLabel: 'Reviewed',
    										items: [
    											{boxLabel: 'Yes', name: 'Reviewed', inputValue: 1},
    											{boxLabel: 'No', name: 'Reviewed', inputValue: 0},
    											{boxLabel: 'All', name: 'Reviewed', inputValue: '', checked: true}
    										]
    									}, {
    										xtype: 'radiogroup',
    										fieldLabel: 'Accepted',
    										items: [
    											{boxLabel: 'Yes', name: 'Accepted', inputValue: 1},
    											{boxLabel: 'No', name: 'Accepted', inputValue: 0},
    											{boxLabel: 'All', name: 'Accepted', inputValue: '', checked: true}
    										]
    									}]
    								}]
    							}]
    						}]
    					}]
    				}]
    			});
    		});
    </script>
    </body>
    </html>
    Attached Images
    Attached Files

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    83
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    1. Your 'Search' panel is missing a layout ('fit'?).
    2. Your first fieldset contains 1 column that contains 2 columns? Why doesn't the fieldset directly contain 2 columns? Or, if the first panel is actually required, why does it have layout 'column' instead of 'fit' ?

  3. #3
    Ext User
    Join Date
    Mar 2007
    Posts
    52
    Vote Rating
    2
    exo is on a distinguished road

      0  

    Default


    That did it. Removing that extra column. Left over from previous configurations. Thanks ever so much Condor.

    Incidentally, this lay-out stuff is what causes me the most trouble with ExtJs at this moment. Are there some how-to's or resources on this subject? Thanks again you really rock.

Thread Participants: 1