1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    3
    Vote Rating
    0
    sercos is on a distinguished road

      0  

    Default Why autoHeight: true do not work anymore?

    Why autoHeight: true do not work anymore?


    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?
    Last edited by sercos; 22 Mar 2012 at 1:42 PM. Reason: BAD FORMATTING

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,330
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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'
                    }
                ]
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    3
    Vote Rating
    0
    sercos is on a distinguished road

      0  

    Default


    Quote Originally Posted by mitchellsimoens View Post
    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>

Thread Participants: 1

Tags for this Thread