Ext JS Grid Vertical Scrollbar Problem

Hi wilq32!

How are you this morning?  It's good to hear from you!

Sure thing, I've attached the following screenshots.  Screenshot-1.jpg is the way the grid renders upon page load.  Screenshot-2.jpg is the way it should look like.  (In case you are wondering "How in the world did you get the vertical scrollbar to show up when you are saying that it doesn't show up?", it's just that it does not show up on page load.  If I do anything to cause a reload of the grid (say enter a search parameter, or click on one of the headers to do a sort by column, etc.) the scrollbar shows up.

This is a real mystery for me.  Validation shows that the page is relatively clean (the only errors showing are from the live chat feature, but I think it is because the validator does not know how to interpret the javascript and URL's associated with this feature.)  Plus this problem shows up in ALL browsers, not just FF.

Thanks a million for taking a look at this for me! :)

Forgot to mention, I don't think it is the Ext JS library components.  They work perfectly fine on my demo page at http://www.sleepamazing.com/associates/.  I wish I knew what it was about my particular website that is causing all these problems.

Compare livesearch.js  in GRID

in demo you provide there is height:200

In your grid there is no such a thing. Add this and it should be ok (I hope) here are cutout from livesearch.js  from demo.

168 animCollapse: false,
169
170 width:715,
171 height:200,
172 stripeRows:true,
173 title:'Search results',
174 iconCls:'icon-grid',
175 renderTo: "gridWrapper"
176// autoHeight:true
177
178 });
179 } 

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:

I'm sorry for the confusion, wilq32.  I have my demo set to 200, but grid2 (the grid showing in the screenshots) is set to 100.  Otherwise, from what I can see, the code that you gave me is identical to what is in the coding for grid2, except for the commented out autoheight:true statement.  Now, if I am correct, that commented out statement should have no effect, am I right?

I would like to keep grid2 set to 100 (as it is in the screenshots).  Do you see any way of doing that?

 Hey, by the way, I notice you are really close to becoming an EE Sage.  Congratulations!

you got 3 grids (I dont know for what) but you changed only second one. Try changing height :100 to other ones:

lines: 380, 317   in  livesearch.js

I don't understand what you mean.  You can log into the website at https://www.sleepamazing.com/chiropractic/ by typing in "test" for the username and "test1234" for the password.  There you will see the three grids and how they are rendered.  One grid is in the "Referrals" tab, and two are in the "Status" tab.  If I increase the height to 500, I would need to enter in more names into the database in order to test the vertical tab.  But, based on my earlier tests, it does not matter what dimensions height is set to, the vertical tab still does not render.

can you do height:100 on  https://www.sleepamazing.com/chiropractic/  page in lines I gave you ? I need to check something please :)

Oh!  Sorry :P  See... I can do some pretty stupid things.  BTW, I made the changes you asked for.

Holy cow!  You are awesome!  I had to set the height to 75px (as you said, 25px less than the 100px), and it worked!

My only question is, it appears that this class is common to all three grids.  How am I going to handle this considering that the grids are different sizes?

Huh, I thought maybe the solution was to do CSS off the element ID's, but I tried that and it didn't work.

I restored the grid height on grids 1 and 3 to 500.  The CSS locks in the scroll to the 100px size.

I've got it!  Each grid has its own unique ID.  I simply changed your CSS to reflect the unique identifier such that the CSS now looks like this:

#refer_panel1 div.x-grid3-scroller {
   
   height:175px; // I set this grid to 200px so you can see that it works.
}

#refer_panel2 div.x-grid3-scroller {
   
   height:75px;
}

#refer_panel3 div.x-grid3-scroller {
   
   height:475px;
}

wilq32, thanks a million for all your help.  I don't know what I'd do without you!

You are an outstanding programmer.  Thanks a million!

Huh sorry for long response I got meeting in my work ;) Good to know that it worked! Good luck with coding