Results 1 to 3 of 3

Thread: vbox layout containing items with unknown height

  1. #1
    Ext JS Premium Member
    Join Date
    Dec 2009
    Posts
    17

    Question vbox layout containing items with unknown height

    Has someone written a layout whereby I can have a number of items of unknown height which take up the space they require, followed by an item that takes up the remaining height?

    Moreover, is it possible for a number of items to have unknown height, some items to have a fixed known height and another set of items to take up the remaining height using the flex property (or something similar)?

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    You are describing a vbox layout with this fix http://www.extjs.com/forum/showthrea...978#post422978

  3. #3
    Ext JS Premium Member
    Join Date
    Dec 2009
    Posts
    17

    Question

    That override does not fix the issue I am having. I have broken it down into a simplified example:

    Code:
    <html>
    
    <head>
        <title>Test VBox</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="../js-lib/ext/resources/css/ext-all.css">
        <script type="text/javascript" src="../js-lib/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../js-lib/ext/ext-all-debug.js"></script>
    
        
        <script type="text/javascript"> 
        Ext.onReady(function(){
    
    
    
            
    
          var searchBox = new Ext.form.TextField({
                allowBlank: true,
                flex: 1,
                emptyText: 'e.g. Regent Street, London'
          });
          
          var searchButton = new Ext.Button({
                text: 'Search',
                width: 60
          });
    
            
          var searchBoxAndButton = new Ext.Container({
              layout: 'hbox',
              //height:32, // THIS HEIGHT IS REQUIRED, BUT I WANT IT TO USE THE HEIGHT IT REQUIRES (I.E. I DO NOT WANT TO SPECIFY A HEIGHT)
              layoutConfig: {
                  align : 'stretch',
                  pack: 'start',
                  padding: '5'
              },
              items: [searchBox, searchButton]
          });
              
          var searchStatusPanel = new Ext.Container({
                contentEl: 'searchStatus'
          });
            
            var inputBoxButtonAndStatus = new Ext.Container({
                  layout: 'vbox',
                  height:70, // THIS HEIGHT IS REQUIRED, BUT I WANT IT TO USE THE HEIGHT IT REQUIRES (I.E. I DO NOT WANT TO SPECIFY A HEIGHT)
                  layoutConfig: {
                      align : 'stretch',
                      pack: 'start'
                    },
                    items: [searchBoxAndButton, searchStatusPanel]
              });
            
    
            var resultsStatusPanel = new Ext.Container({
                // this does NOT require a height
                contentEl: 'resultsStatus'
            });
    
            var resultsAccordian = new Ext.Panel({
                layout: 'accordion',
                flex: 1,
                items: [
                {title: 'AAA', layout: 'fit'},
                {title: 'BBB', layout: 'fit'},
                {title: 'CCC', layout: 'fit'}
                ]
            });
            
            
            var searchResultsPanel = new Ext.Container({
                layout:'vbox',
                flex:1,
                layoutConfig: {
                      align : 'stretch',
                      pack: 'start'
                },
                items: [resultsStatusPanel, resultsAccordian]
            });
            
            
            var centerPanel = new Ext.Panel({
                title: 'Center Panel',
                layout:'vbox',
                  layoutConfig: {
                  align : 'stretch',
                  pack: 'start'
                  },
                  items: [inputBoxButtonAndStatus, searchResultsPanel]
              });
            
    
    
            
            
            var viewport = new Ext.Viewport({
                layout: 'fit',
                items: [ centerPanel ]
            });
    
            
        });
        </script>
    
    </head>
    
    <body>
    
    <div id="searchStatus" class="x-hide-display">
        Search status panel.
    </div>
    
    <div id="resultsStatus" class="x-hide-display">
        Results status Panel.
    </div>
    
    
    
    </body>
    
    </html>
    As you can see from the attached screenshots, the inputBoxButtonAndStatus and its child items must have a height specified, otherwise they are given zero. The override has no effect. I am using Ext 3.1.0. What am I doing wrong?
    Attached Images Attached Images

Posting Permissions

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