View Full Version : problems getting scrollbar to appear in a Viewport with a GridPanel as the only item

2 Apr 2008, 2:05 PM

i have a GridPanel that is contained inside a Viewport with the grid as the only item. I read through the Grid FAQ and have set layout: 'fit' & autoScroll: true to but I'm not getting a scrollbar :(

here's my code...any suggestions as to what I'm missing?

var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: 'File', width: 130, sortable: true, dataIndex: 'filename'},
{header: 'Status', width: 100, sortable: true, dataIndex: 'dl_status', id: 'status'},
{header: 'File size', width: 50, sortable: true, dataIndex: 'size', renderer: renderFileSize},
{header: 'Type', width: 60, sortable: true, dataIndex: 'type', renderer: renderType},
{header: 'Friends', width: 60, sortable: true, dataIndex: 'friends', renderer: renderFriends},
{header: 'File id', width: 120, sortable: true, dataIndex: 'fileid', id: 'fileid', hidden: true}
view: new Ext.grid.GroupingView({
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})',
enableGroupingMenu: false,
showGroupName: false,
collapsible: true,
frame: false,
autoHeight: true,
autoWidth: true,
autoScroll: true,
layout: 'fit',
border: false,
enableColumnHide: false,
enableColumnMove: false,
enableDragDrop: false,
enableHdMenu: false

// put the grid in a Ext.Viewport
var viewport = new Ext.Viewport({
layout: 'fit',
items: [{
id: 'center-panel',
region: 'center',
items: [grid],
layout: 'fit',
border: false,
autoScroll: true,

the attached screenshot shows what it looks like in Firefox 2/WinXP

2 Apr 2008, 2:40 PM
argh. ok i figured it out. removing autoHeight: true and autoWidth: true fixed it. I guess it causes problems when you specify layout: fit :)