View Full Version : GridPanel ScrollBar

29 Oct 2009, 6:31 AM
It must be possible to have a GridPanel that shows the scrollbar when necessary and cleanly hides it otherwise. In this simple example, the scrollbar appears as expected, but if you have only a couple of data rows, the space normally occupied by the scrollbar appears at the edge of the GridPanel, with no scrollbar inside it.

This looks goofy, IMHO; I want the column to expand to use that space, like it does in a typical Win32 grid. Any thoughts?
I am a bit pessimistic because the Ext Grid examples either always show a scrollbar, or, have this weird (IMO) extra blank column of space reserved for the scrollbar.


// simple grid
var leftStore = new Ext.data.JsonStore({
fields: ['name']

var rec = leftStore.recordType;
leftStore.add(new rec ({name: 'Sams Face'}));
leftStore.add(new rec ({name: 'Last Name'}));

leftGrid = new Ext.grid.GridPanel({
flex: .5,
store: leftStore,
height: 200,
width: 150,
columns: [{
header: 'Available',
dataIndex: 'name',
id: 'name',
autoExpandColumn: 'name',
viewConfig: {
forceFit: true,
frame: true,

vw = new Ext.Viewport({
layout: 'anchor',
items: [leftGrid],


7 Jan 2010, 1:46 PM
For the benefit of people browsing this thread, the following hack solves the problem:

var courseListGrid = new Ext.grid.GridPanel({
store: coursesHashStore,
width: 150,
columns: [
{id:'course', header: 'Course', dataIndex: 'course_id'},
title: 'Courses',
hideHeaders : true,
columnLines : false,
viewConfig: {
forceFit: true,
scrollOffset : 17,
onLayout: function(){
// store the original scrollOffset
if (!this.orgScrollOffset)
this.orgScrollOffset = this.scrollOffset;

var scroller = Ext.select('.x-grid3-scroller', this).elements[0];
if (scroller.clientWidth == scroller.offsetWidth)
// no scroller
this.scrollOffset = 0;
} else {
// there is a scroller
this.scrollOffset = this.orgScrollOffset;
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),

16 Mar 2012, 5:15 PM
You need to update this line:

var scroller = Ext.select('.x-grid3-scroller', this).elements[0];


var scroller = Ext.select('.x-grid3-scroller', this).elements[1];

Thanks for the lead, Izhaki.