Force Vertical Scrollbar?

[InterTrade]

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:

 
/*
 * 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(); 
     
});

[Animal]

http://extjs.com/forum/showthread.ph...377#post333377

[InterTrade]

I am not certain what kind of message you are trying to send me with that last post, Animal, although that shouldn't surprise me too much since I have had the chance now to see a number of your posts. You seem to have a gift for the cryptic answer.

If you are trying to tell me that I am being too verbose in my coding and to just list the affected areas, then just pay attention to the createGrid() function and the expander sections.

Is there anyone out there that can help me?

Thank you.

[Animal]

Grids provide scroll bars.

[InterTrade]

Not mine, Animal, as you can see from the attached screenshot. That is why I am asking if there is some way to force the vertical scrollbar to always be present.

[InterTrade]

Sorry fellas,

But with three days in this forum with no helpful response I had to turn to some helpful experts at Experts Exchange.

I got my answer. It is posted at http://www.experts-exchange.com/Prog...html#a24467410 if anyone is interested in the solution.

[Animal]

There was no response because GridPanels DO provide scrollbars unless you screw something up.

[InterTrade]

Whatever Animal. People like you shouldn't even bother replying to these things.

[Animal]

No. I shouldn't. It's hopeless trying to help sometimes.

[InterTrade]

Trying to help? Oh yes, thank you for all the help you've given to me. I was able to quickly resolve my problem thanks to you.

If what you do you consider helping, then you should know that such "help" is neither welcome nor wanted.