1. #1
    Ext User
    Join Date
    May 2009
    Posts
    21
    Vote Rating
    1
    InterTrade is on a distinguished road

      0  

    Exclamation Force Vertical Scrollbar?

    Force Vertical Scrollbar?


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

  2. #2

  3. #3
    Ext User
    Join Date
    May 2009
    Posts
    21
    Vote Rating
    1
    InterTrade is on a distinguished road

      0  

    Post Is My Code Too Long?

    Is My Code Too Long?


    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.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Grids provide scroll bars.

  5. #5
    Ext User
    Join Date
    May 2009
    Posts
    21
    Vote Rating
    1
    InterTrade is on a distinguished road

      0  

    Post Thanks for the Reply

    Thanks for the Reply


    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.
    Attached Images

  6. #6
    Ext User
    Join Date
    May 2009
    Posts
    21
    Vote Rating
    1
    InterTrade is on a distinguished road

      0  

    Post Got My Answer

    Got My Answer


    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.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

  8. #8
    Ext User
    Join Date
    May 2009
    Posts
    21
    Vote Rating
    1
    InterTrade is on a distinguished road

      0  

    Post Whatever

    Whatever


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

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,483
    Vote Rating
    35
    Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

  10. #10
    Ext User
    Join Date
    May 2009
    Posts
    21
    Vote Rating
    1
    InterTrade is on a distinguished road

      1  

    Post Oh Please

    Oh Please


    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.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar