Why autoHeight: true do not work anymore?

**sercos** · 22 Mar 2012 1:40 PM

I start with a simple example to make things clear of what I need to do with the autoheight: true on a tabPanel.

If you click on "show", the "Field2" will be shown and the tab that does not self adjust the size of the contenttabAutoHeight.png

Code:

<head>    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Tabs Example</title>
    <!-- Ext includes -->
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../bootstrap.js"></script>    
    
</head>
<body>
    <h1>Tab Panel Examples</h1>


    <h2>Tabs with auto height that resize to the content. Built from existing markup.</h2><br>


	<script type="text/javascript" >
				Ext.require('Ext.tab.*');
				Ext.onReady(function(){
					// basic tabs 1, built from existing content
					var tabs = Ext.createWidget('tabpanel', {
						id: 'painel',
						renderTo: 'tabs1',
						width: 450,
						activeTab: 0,
						layout:'fit',
						layoutConfig: {
							align : 'stretch',
							pack  : 'start',
						},
						defaults :{
							bodyPadding: 10
						},
						items: [{
							id: 'idScript',
							defaults :{height:'auto'},
							contentEl:'script', 
							title: 'Short Text',
							closable: true
						},{
							id: 'idMarkup',
							html: "long text", 
							title: 'Long Text'
						}]
					});
					 
				   
				});
	</script>
	
    <!-- container for the existing markup tabs -->
    <div id="tabs1">
        <div id="markup" class="x-hide-display">
			bla
		</div>
        <div id="script" style="height: auto;" class="x-hide-display">
            
			<div >
				hide: <input name="radio1" type="radio" value="true" onclick="hideShow(this, 'filed2');"/>
				show: <input name="radio1" type="radio" value="false" onclick="hideShow(this, 'filed2');"/>
				<script type="text/javascript">
				
				
					function hideShow(radio, idfield) {
						if (radio.value == "true"){
							document.getElementById(idfield).style.display = 'none';
						}else {
							document.getElementById(idfield).style.display = 'inline';
						}
					}
					
					
				</script>
				
			</div>
			<div id="filed1" >filed 1<input type="text"/></div>
			<div id="filed2" style="display:none;" >filed 2<input type="text"/></div>
        </div>
    </div>
</body>

I'm not sure if this is a bug, but a simple property "height: auto" would work perfectly.

Can someone help me make the tab fit the size of the content?

**mitchellsimoens** · 22 Mar 2012 2:01 PM

autoHeight config is not needed. If you specify no height and it's not being managed by a layout then auto-height is assumed. Test case:

Code:

new Ext.tab.Panel({
    renderTo : document.body,
    width    : 400,
    title    : 'Test',
    items    : [
        {
            title : 'One',
            items : [
                {
                    xtype      : 'textfield',
                    fieldLabel : 'Test'
                }
            ]
        },
        {
            title : 'Two',
            items : [
                {
                    xtype      : 'textfield',
                    fieldLabel : 'Test'
                },
                {
                    xtype      : 'textareafield',
                    fieldLabel : 'Test'
                },
                {
                    xtype      : 'textareafield',
                    fieldLabel : 'Test'
                }
            ]
        }
    ]
});

**sercos** · 27 Mar 2012 1:26 PM

Originally Posted by mitchellsimoens

autoHeight config is not needed. If you specify no height and it's not being managed by a layout then auto-height is assumed. Test case:

This works if i use only ext components with methods ext.getCmp('cmp-name').hide() or .show().

If i dont use ext components to create my fields, the tab dont adjust to the content when i show or hide elements.

Here is my test code:

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>Tabs Example</title>
    <!-- Ext includes -->
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../bootstrap.js"></script>


    
</head>
<body>
    <h1>Tab Panel Examples</h1>


    <h2>Tabs with auto height that resize to the content. Built from existing markup.</h2><br>


    <!-- container for the existing markup tabs -->
    <div id="tabs1">
        <script type="text/javascript">
		
		Ext.onReady(function(){


	var panel = new Ext.tab.Panel({
	renderTo : 'tabs1',
	bodyPadding: 15,
    width    : 400,
    title    : 'Test',
	activeTab: 1,
    items    : [
        {
            title : 'One',
            items : [
                {
                    xtype      : 'textfield',
                    fieldLabel : 'Test'
                }
            ]
        },
        {
            title : 'Two',
			id:	'tab2',
			contentEl:'script', 
			layout: 'fit',
            items : [
				{
					xtype: 'radiogroup',
					fieldLabel: 'Radios',
					items: [
						{	
							boxLabel: 'Hide', 
							name: 'rb-auto', 
							inputValue: 'show',
							checked: true,
							handler: function(radio, checked) {
								if (checked) {
									//Ext.getCmp('field2').hide();
									Ext.get('field22').hide();
									//document.getElementById('field22').style.display = 'none';
							   }
							}
						},
						{
							boxLabel: 'Show', 
							name: 'rb-auto',
							handler: function(radio, checked) {
							   if (checked) {
									//Ext.getCmp('field2').show();
									Ext.get('field22').show();
									//Ext.get('tab2').doComponentLayout();
									//document.getElementById('field22').style.display = 'inline';
							   }
							},
							inputValue: 'hide'
						}
					]
				},
                {
                    xtype      : 'textfield',
					id			: 'field1',
                    fieldLabel : 'Test 1'
                }
				
            ]
        }
    ]
});


	
   
});
		
		
		</script>
        <div id="script" style="height: auto;" class="x-hide-display">
			<div id="field22" style="display:none;" >filed 2<input type="text"/></div>
        </div>
    </div>
</body>
</html>

Why autoHeight: true do not work anymore?

Thread Tools

Search Thread

Display

Why autoHeight: true do not work anymore?

Why autoHeight: true do not work anymore?

Tags for this Thread