PDA

View Full Version : GridPanel ScrollBar



GregT
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.

<pre>
Ext.onReady(function(){

// 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],
});

});</pre>

Izhaki
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;
}
this.fitColumns(false);
}
},
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
});

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

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

to:

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

Thanks for the lead, Izhaki.