title: ExtJs Grid heights and scroll bars eurgh
body: <p>I have a quite a complicated layout for my application, using borders, vbox's and hbox's which all seem to fit quite well except for one annoyance. The bottom of the grid in the southern region is not behaving. I want the grid to take up the height of the panel when the browser is above minHeight/maximized but at the moment it look like this:</p>
  
  <p><img src="https://i.stack.imgur.com/urtoj.png" alt="enter image description here"></p>
  
  <p>And when the browser is shrunk (but not below min size) it looks like this and I am unable to get to the bottom of the grid scrollbar :(</p>
  
  <p><img src="https://i.stack.imgur.com/0FswH.png" alt="enter image description here"></p>
  
  <p>You can see the scrollbar cut of (probable min height on the viewport/grid issue) but not sure how to fix this can someone spot what I need to do resolve these two issues? Code below:</p>
  
  <pre><code>&lt;script type="text/javascript" src="../app.js"&gt;&lt;/script&gt;
  &lt;!-- script to warn users when leaving page --&gt;
  &lt;?php
  $db = Zend_Registry::get('db');
  $result = $db-&gt;query("select ERROR_ID, ERROR_DESCRIPTION, EMAIL_CONTENT, to_char(\"TIMESTAMP\", 'MM/DD/YYYY HH24:MI:SS') as TIMESTAMP, READ from PI_EMAIL_ERROR where \"TIMESTAMP\" = ( select max(\"TIMESTAMP\") from PI_EMAIL_ERROR ) and READ = 0 and rownum = 1")-&gt;FetchAll();
  ?&gt;
  &lt;script type="text/javascript"&gt;
      var container = Ext.create('Ext.container.Viewport',{
          id: 'mainWindow',
          minWidth: 800,
          minHeight: 640,
          layout:'fit',
          listeners: {
              afterrender: function() {
                  this.setSize(this.getWidth(), this.getHeight());                    
              },
              resize: function(){
                  var programGrid = Ext.getCmp('programList');
                  if(this.getHeight() &lt; this.minHeight){
                      console.log("Height: ", this.getHeight());
                      console.log("minHeight: ", this.minHeight);
                      console.log("Grid old height: ", programGrid.height);
                      programGrid.height = (this.minHeight - programGrid.height)-18;
                      this.setSize(this.getWidth(), this.getHeight());
                      console.log("Grid new height: ", programGrid.height);
                  } else {
                      programGrid.height = 380;
                  }
              }
          },
          defaults: {
              //collapsible: true, //Add this to true later maybe impliment a lock sam
              //when viewport scrolled up, background shows a login.
              split: true,
              rezisable: false
          },
          items:[{
              layout: 'border',
              //height: 640,
              //minHeight: 640,
              items: [
                  {
                      //This panel holds the file menu strip and the show combo                    
                      border: false,
                      region: 'north',
                      height: 92,
                      bodyStyle:'background: #DFE8F6;',
                      /******Toolbar*******/
                      tbar: [
                      /****File Button****/
                          {
                              xtype: 'button',
                              text: window.samlanguage.file,
                              width: 60,
                              handler: function(btn){
  
                              },
                              menu: [
                                  {
                                      text: window.samlanguage.refreshlist,
                                      action: 'refreshGrid',
                                      icon: '../assets/images/refresh.png',
                                      handler: function(btn){
  
                                      }
                                  },{
  
                                      text: window.samlanguage.settings,
                                      icon: '../assets/images/settings.png',
                                      action: 'spawnSettings',
                                      handler: function(Btn){
                                      }
                                  },{
  
                                      text: window.samlanguage.compose,
                                      icon: '../assets/images/mail--plus.png',
                                      action: 'spawnEmail',
                                      handler: function(Btn){
                                          Ext.create('APP.view.core.forms.Emailform').show();
                                      }
                                  },{
  
                                      text: window.samlanguage.logout,
                                      action: 'logout',
                                      icon: '../assets/images/exit.png',
                                      handler: function(){
  
                                      }
                                  }
  
                              ]
                          },
                      /****Help Button****/
                          {
                              xtype: 'button',
                              text: window.samlanguage.help,
                              width: 60,
                              handler: function(btn){
  
                              },
                              menu: [
                                  {
                                      text: window.samlanguage.contents,
                                      icon: '../assets/images/contents.png',
                                      action: 'spawnContents',
                                      handler: function(btn){
  
                                      }
                                  },{
  
                                      text: window.samlanguage.license,
                                      icon: '../assets/images/licence.png',
                                      handler: function(btn){
                                          var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"&lt;b&gt;Retrieving&lt;/b&gt; licensing information..."});
                                          myMask.show();
                                          Ext.Ajax.request({
                                              url: '../License/read',
                                              method: 'post',
                                              //params: values,
                                              success: function(response){
                                                  myMask.hide();
                                                  var numusers = Ext.decode(response.responseText);
                                                  Ext.create('APP.view.core.forms.License', {numusers: numusers.numusers}).show();
  
                                              }
                                          });
                                      }
                                  },{
  
                                      text: window.samlanguage.about,
                                      icon: '../assets/images/about.png',
                                      //action: 'spawnAbout',
                                      handler: function(btn){
                                          Ext.Msg.show({
                                              title:'About us',                                                
                                              buttons: Ext.Msg.OK,
                                              icon: 'perceptiveLogo'
                                          });
                                      }
                                  }
  
                              ]
                          }
                      ],
                      items: [{
                          //Comboform with userlist
                          xtype: 'Comboform',
                          bodyStyle:'background: #DFE8F6;',
                          border: false
                      }]
  
                  }//End north region (header) region
                  ,{
                      region:'center',
                      type: 'vbox',
                      align : 'stretch',
                      items: [
                          {
                              //Add the userlist grid
                              title: 'Currently showing all users',
                              //id: 'usergridList',
                              height: 290,
                              minHeight: 290,
                              border: false,
                              xtype: 'Allusers'
                          },
                          {
                              //Add the allprograms grid
                              title: 'Program Access Permissions',
                              border: false,
                              height: 380,
                              minHeight: 380,
                              //height: 'auto',
                              xtype: 'Allprograms'
                          }
                      ]
  
                  } //End center (body) region
                  ,{
                      region:'east',
                      type: 'vbox',
                      align : 'stretch',
                      split: true,
                      //collapsible: true,
                      width: 240,
                      minWidth: 240,
                      maxWidth: 240,
                      //title: 'User Actions',
                      listeners: {
                          /*collapse: function() {
                           this.setTitle("User management");
                           },
                           expand: function() {
                           this.setTitle("User Actions");
                           },
                           click: function() {
                           return false;
                           },*/
                          afterrender: function(){
                              this.splitter.disable();
                          }
                      },
                      //height: 300
                      items :[
                          {
                              title: 'User Actions',
                              border: false,
                              height: 168,
                              xtype: 'Useractionsform'
  
                          },
                          {
                              title: 'View Audit',
                              border: false,
                              height: 122,
                              xtype: 'Auditform'
                          },
                          {
                              title: 'Program Access',
                              border: false,
                              height: 380,
                              minHeight: 340,
                              xtype: 'Programactionsform'
                          }
                      ]
                  } //End of east region
                  ,{
                      region: 'south',
                      height: 20,
                      bodyStyle:'background: #DFE8F6;',
                      border: false
                  }
  
              ]
          }]
      }).show();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Syntax highlighted link:
  <a href="http://paste.laravel.com/kPr" rel="nofollow noreferrer">http://paste.laravel.com/kPr</a></p>
  
  <p>Thank you kindly
  Nathan</p>