I need assistance with a problem I cannot figure out. I have read over the helps and the forum posts on this issue and nothing suggested there seems to work. This issue affects two areas that I am working on. Both areas use fixed height grids. The first area involves a grid that uses a RowExpander. When I take a list that is too small for the container and expand all the row items such that it now extends beyond the height of the container, I do not get a scroll bar. The other area deals with a grid with a 100px height. The list I have in that grid extends beyond the limited height that I set, but I still get no scroll bar.

Can anyone give me a clue as to what is going on?

The code for this is as follows:

Code:
 
/*
 * Ext JS Library 2.0.1
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 *
 * For application to WordPerfect Professional Theme
 */
Ext.onReady(function()
{
 // ----------------
 // Set listeners on form fields
 // ---------------- 
    Ext.override(Ext.form.Field, {
        fireKey : function(e) {
            if(((Ext.isIE && e.type == 'keydown') || e.type == 'keypress') && e.isSpecialKey()) {
                this.fireEvent('specialkey', this, e);
            }
            else {
                this.fireEvent(e.type, this, e);
            }
        }
      , initEvents : function() {
            this.el.on("focus", this.onFocus,  this);
            this.el.on("blur", this.onBlur,  this);
            this.el.on("keydown", this.fireKey, this);
            this.el.on("keypress", this.fireKey, this);
            this.el.on("keyup", this.fireKey, this);
            this.originalValue = this.getValue();
        }
    });

  Ext.QuickTips.init();
  
 // ----------------
 // vars
 // ----------------
 var ds1; // datasource
 var ds2; // datasource
 var ds3; // datasource
 var grid; // grid component
 var xg1 = Ext.grid;
 var xg2 = Ext.grid;
 var xg3 = Ext.grid;
 var expander;
 var simple1;
 var simple2;
 var simple3;
 
 // ----------------
 // Create searchform
 // ---------------- 
 function createSearchForm()
 {
     simple1 = new Ext.FormPanel({
      width:715,
         labelWidth: 60,
         frame:true,
         title: 'Live search',
         bodyStyle:'padding:5px 5px 0',
         defaults: {width: 230},
         defaultType: 'textfield',
 
         items: [{
                 fieldLabel: 'Search',
                 name: 'query',
                 allowBlank:true,
                                 
     listeners: 
     {
      keyup: function(el,type)
      {
       var theQuery=el.getValue();
       if(theQuery.length != 0) {
        ds1.load(
        {
         params: 
         { 
          query: theQuery
         }
        });
       } else {
        ds1.load(
        {
         params: 
         { 
          query:"dummy",
          show:"all"
         }
        });
       }
       
      }    
     }
             }
         ] 
     });
 
     simple1.render("searchWrapper1"); 
  simple2 = new Ext.FormPanel({
      width:715,
         labelWidth: 60,
         frame:true,
         title: 'Live search',
   bodyStyle:'padding:5px 5px 0',
         defaults: {width: 230},
         defaultType: 'textfield',
 
         items: [{
                 fieldLabel: 'Search',
                 name: 'query',
                 allowBlank:true,
                                 
     listeners: 
     {
      keyup: function(el,type)
      {
       var theQuery=el.getValue();
       if(theQuery.length != 0) {
        ds2.load(
        {
         params: 
         { 
          query: theQuery
         }
        });
       } else {
        ds2.load(
        {
         params: 
         { 
          query:"dummy",
          show:"all"
         }
        });
       }
       
      }    
     }
             }
         ] 
     });
 
     simple2.render("searchWrapper2");
  
     simple3 = new Ext.FormPanel({
      width:715,
         labelWidth: 60,
         frame:true,
         title: 'Live search',
         bodyStyle:'padding:5px 5px 0',
         defaults: {width: 230},
         defaultType: 'textfield',
 
         items: [{
                 fieldLabel: 'Search',
                 name: 'query',
                 allowBlank:true,
                                 
     listeners: 
     {
      keyup: function(el,type)
      {
       var theQuery=el.getValue();
       if(theQuery.length != 0) {
        ds3.load(
        {
         params: 
         { 
          query: theQuery
         }
        });
       } else {
        ds3.load(
        {
         params: 
         { 
          query:"dummy",
          show:"all"
         }
        });
       }
       
      }    
     }
             }
         ] 
     });
 
     simple3.render("searchWrapper3"); 
 } 
  
 // ----------------
 // Create datasource
 // ----------------
 function createDS()
 {
  ds1 = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({
                url: 'livesearch1.php',
                method: 'POST'
            }),                        
            
            reader:  new Ext.data.JsonReader({
    totalProperty: 'total',
    root: 'results',
    id: 'id1',
    fields: ['referral_id', 'date_time', 'user_id','firstname','lastname', 'address', 'city', 'state', 'zipcode', 'phone', 'terms_conditions', 'initial_purchase', 'recent_purchase', 'commission_latest', 'commission_total', 'status', 'customer_id', 'actions']
   })         
   
  });
  ds1.load(
  {
   params: 
   { 
    query:"dummy",
    show:"all"
   }
  });    
  ds2 = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({
                url: 'livesearch2.php',
                method: 'POST'
            }),                        
            
            reader:  new Ext.data.JsonReader({
    totalProperty: 'total',
    root: 'results',
    id: 'id2',
    fields: ['referral_id', 'date_time', 'user_id','firstname','lastname', 'address', 'city', 'state', 'zipcode', 'phone', 'terms_conditions', 'initial_purchase', 'recent_purchase', 'commission_latest', 'commission_total', 'status', 'customer_id', 'actions']
   })         
   
  });
  ds2.load(
  {
   params: 
   { 
    query:"dummy",
    show:"all"
   }
  });    
  ds3 = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({
                url: 'livesearch3.php',
                method: 'POST'
            }),                        
            
            reader:  new Ext.data.JsonReader({
    totalProperty: 'total',
    root: 'results',
    id: 'id3',
    fields: ['referral_id', 'date_time', 'user_id','firstname','lastname', 'address', 'city', 'state', 'zipcode', 'phone', 'terms_conditions', 'initial_purchase', 'recent_purchase', 'commission_latest', 'commission_total', 'status', 'customer_id', 'actions']
   })         
   
  });
  ds3.load(
  {
   params: 
   { 
    query:"dummy",
    show:"all"
   }
  });    
 }
 // ----------------
 // Create expander
 // ---------------- 
    var expander = new xg1.RowExpander({
        tpl : new Ext.Template(
            '<div id="expander_columns"><div id="expander_col1">{date_time}<br />Referral ID: {referral_id}</div><div id="expander_col2">{address}<br />{city}, {state}  {zipcode}</div><div id="expander_col3">Phone: {phone}</div><div id="expander_col4">Status: {status}</div></div>'
        )
    });     
 
 
 // ----------------
 // Create grid
 // ---------------- 
 function createGrid()
 {
     grid1 = new xg1.GridPanel(
     {
   id: 'refer_panel1',
         store: ds1, // use the datasource
         
         cm: new xg1.ColumnModel(
          [
           expander,
              {id:'lastname',header: "Last Name", width: 310, sortable: true, dataIndex: 'lastname'},
              {id:'firstname',header: "First Name", width: 300, sortable: true, dataIndex: 'firstname'},
              {id:'actions',header: "Actions", width: 67, sortable: true, dataIndex: 'actions'}
          ]
         ),        
         
         viewConfig: 
         {
             forceFit:true
         },
         
         plugins: expander,
   collapsible: true,
   animCollapse: false,
        
   width:715,
   height:500,
         stripeRows:true,
         title:'Search results',
         iconCls:'icon-grid',
         renderTo: "gridWrapper1"
         
     });
  grid2 = new xg2.GridPanel(
     {
   id: 'refer_panel2',
         store: ds2, // use the datasource
         
         cm: new xg2.ColumnModel(
          [
     {id:'lastname',header: "Last Name", width: 310, sortable: true, dataIndex: 'lastname'},
              {id:'firstname',header: "First Name", width: 280, sortable: true, dataIndex: 'firstname'},
              {id:'Status',header: "<form name='status2' action='https://www.sleepamazing.com/chiropractic/?page_id=201' method='post' onSubmit='return get_popup(&quot;https://www.sleepamazing.com/chiropr...e_id=201&quot;, &quot;status2&quot;, 530, 550)'><input type='hidden' name ='popup' value='true'><a href='javascript:submitform(&quot;status2&quot;);'>Status</a><input type='submit' name='fakeSubmitButton' style='display: none'/></form>", width: 108, sortable: true, dataIndex: 'status'}
          ]
         ),        
         
         viewConfig: 
         {
             forceFit:true
         },
   collapsible: true,
   animCollapse: false,
   width: 715,
   height: 100,
         stripeRows:true,
         title:'Search results',
         iconCls:'icon-grid',
         renderTo: "gridWrapper2"
         
     });
     grid3 = new xg3.GridPanel(
     {
   id: 'refer_panel3',
         store: ds3, // use the datasource
         
         cm: new xg3.ColumnModel(
          [
              {id:'lastname',header: "Last Name", width: 155, sortable: true, dataIndex: 'lastname'},
              {id:'firstname',header: "First Name", width: 110, sortable: true, dataIndex: 'firstname'},
              {id:'recent_purchase',header: "Purchase Date / Time", width: 130, sortable: true, dataIndex: 'recent_purchase'},
              {id:'commission_latest',header: "Amount Paid", width: 90, sortable: true, dataIndex: 'commission_latest'},
              {id:'commission_total',header: "Total Commissions", width: 115, sortable: true, dataIndex: 'commission_total'},
              {id:'status',header: "<form name='status3' action='https://www.sleepamazing.com/chiropractic/?page_id=201' method='post' onSubmit='return get_popup(&quot;https://www.sleepamazing.com/chiropr...e_id=201&quot;, &quot;status3&quot;, 530, 550)'><input type='hidden' name ='popup' value='true'><a href='javascript:submitform(&quot;status3&quot;);'>Status</a><input type='submit' name='fakeSubmitButton' style='display: none'/></form>", width: 98, sortable: true, dataIndex: 'status'}
          ]
         ),        
         
         viewConfig: 
         {
             forceFit:true
         },
   
   collapsible: true,
   animCollapse: false,
         
   width:715,
   height:500,
         stripeRows:true,
         title:'Search results',
         iconCls:'icon-grid',
         renderTo: "gridWrapper3"
         
     });
 } 
 
 createDS();
 createSearchForm();
    createGrid(); 
     
});