View Full Version : Grid Scroll Bar Issue

27 Jan 2012, 3:59 AM

I am using Ext JS 4.0.5. In my application, the grids dont have scrollbars even if the data is overflowed. I tried to fix it on my own. I have set scroll: false on my Grids and changed the CSS of the gridview from overflow:hidden to overflow: auto.  That made both vertical and horizontal scroll bars to show. Now, the vertical scrollbars are working fine. But in case of horizontal scrollbars, the data in the Grids are displayed when scrollbar is scrolled but the columns of Grids are not getting displayed fully.

So when horizontal scrollbar is moved, the overflowed data gets displayed but overflowed column names dont get displayed. Please suggest something to fix it. I cant upgrade to any newer versions for some reasons.

27 Jan 2012, 4:08 AM
You could try using the autoScroll config of the grid. Here is some info from the API docs:

autoScroll (http://docs.sencha.com/ext-js/4-0/#%21/api/Ext.Component-cfg-autoScroll) : Boolean (http://docs.sencha.com/ext-js/4-0/#%21/api/Boolean)
true to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary, false to clip any overflowing content.

Defaults to: false

I am using autoScroll: true and scrollbars work fine (both horizontal and vertical). I have tried this on 4.0.2 and 4.0.7.

30 Jan 2012, 11:21 PM

Thanks for the answer. I have set autoScroll : true in my grid. Both the scroll bar appears now. There are 2 things which needs to be addressed now.
1) An empty space appears aside the horizontal scrollbar. This empty space is a div with id something like "gridscroller"
2) When horizontal scroll is moved to the right, all overflowed data becomes visible, but the overflowed column names does not get visible.


30 Jan 2012, 11:45 PM
can you post the code of your grid? may be someone can spot something from it.

31 Jan 2012, 1:58 AM
Ext.define('DG.view.agent.Grid', {
extend: 'Ext.grid.Panel',
alias: 'widget.agent_grid',
//title: 'Add / Edit / Delete Agent',
frame: true,
xtype: 'gridpanel',
store: 'Agents',
columns: [
text: "ID",
width: 30,
dataIndex: 'agentId',
sortable: true
text: "Agent Type",
width: 200,
dataIndex: 'agentType',

viewConfig: {
forceFit: true,
autoScroll : true

31 Jan 2012, 2:32 AM
Its probably because of forceFit. set it false.

31 Jan 2012, 3:34 AM
By setting forceFit: false, the empty space is removed but the column names still are not fully visible. I can see full data in grid when i scroll to right, but i cant see full column names.

31 Jan 2012, 3:48 AM
I am afraid i don't have any other ideas at this time. try with another version of ExtJS 4.0.2 or 4.0.7 just to check if its working with these. Other than that, try with a normal grid panel (without extending it) and also see what happens if you set frame: false. Although the latter 2 shouldn't make a difference.

31 Jan 2012, 3:59 AM
Ok. Anyways. Thanks a lot for the help.