Results 1 to 4 of 4

Thread: AutoHeight Container

  1. #1
    Sencha User
    Join Date
    Jul 2011
    Location
    India
    Posts
    138
    Answers
    2

    Default Answered: AutoHeight Container

    Hi,

    How to make a container that automatically adjusts its height according to varying height of its children items?

    Thanks

  2. If no height is applied to a parent container and the parent uses an 'auto' or 'fit' layout, it will generally auto-size it's height to match the combined height of all child items.

    Example:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Autoheight Container Test</title>
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
        
        <script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
        
        <script type="text/javascript">
           Ext.onReady(function() {
             Ext.create('Ext.window.Window', {
                title: 'No height specified for Window',
                width: 400,
                items: [{
                  xtype: 'panel',
                  height: 100,
                  title: 'Child Panel 1: Height 100'
                },{
                  xtype: 'panel',
                  height: 60,
                  title: 'Child Panel2 : Height 60'
                },{
                  xtype: 'panel',
                  height: 200,
                  title: 'Child Panel3 : Height 200'
                }],
                buttons: [{
                  text: 'Close',
                  handler: function(button, event) {
                    button.up('window').close();
                  }
                }]
             }).show();
           });
        </script>
      </head>
      <body>
      </body>
    </html>

  3. #2
    Sencha User
    Join Date
    Apr 2011
    Posts
    895
    Answers
    106

    Default

    If no height is applied to a parent container and the parent uses an 'auto' or 'fit' layout, it will generally auto-size it's height to match the combined height of all child items.

    Example:

    Code:
    <!DOCTYPE HTML>
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Autoheight Container Test</title>
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
        
        <script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>
        
        <script type="text/javascript">
           Ext.onReady(function() {
             Ext.create('Ext.window.Window', {
                title: 'No height specified for Window',
                width: 400,
                items: [{
                  xtype: 'panel',
                  height: 100,
                  title: 'Child Panel 1: Height 100'
                },{
                  xtype: 'panel',
                  height: 60,
                  title: 'Child Panel2 : Height 60'
                },{
                  xtype: 'panel',
                  height: 200,
                  title: 'Child Panel3 : Height 200'
                }],
                buttons: [{
                  text: 'Close',
                  handler: function(button, event) {
                    button.up('window').close();
                  }
                }]
             }).show();
           });
        </script>
      </head>
      <body>
      </body>
    </html>

  4. #3
    Sencha User
    Join Date
    Jul 2011
    Location
    India
    Posts
    138
    Answers
    2

    Default

    Thanks for such a quick reply.
    Its solution to exactly what i wanted.

  5. #4
    Sencha Premium User
    Join Date
    Jul 2013
    Posts
    15

    Default Are 'fit' and 'auto' the same thing?

    Wouldn't 'auto' fit the parent to it's children where 'fit' will do exactly the opposite and fit children to their parent?

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •