Grid scrollbar not shown

[nicosk]

id: 'card-1',
border: false,
items: [{
xtype: 'panel',
layout: 'hbox',
border: false,
frame: true,
items: [{
xtype: 'grid',
autoScroll: true,
selModel: csm,
title: 'Contacts',
width: 500,
store: contactStore,
columns: [{
text : 'Id',
flex : 1,
hidden : true,
dataIndex: 'id'
}, {
text : 'First Name',
flex : 1,
sortable : true,
dataIndex: 'firstName'
}, {
text : 'Last Name',
flex : 1,
sortable : true,
dataIndex: 'lastName'
}, {
text : 'Phone #',
flex : 1,
sortable : true,
dataIndex: 'phone'
}],
}, {
xtype: 'panel',
title: 'Groups',
width: 300,
height: 400,
padding : '10px'
}]
}]
}

I cannot get the vertical scrollBar to show. autoScroll in grid and scroll: true don't work

Any ideas?

[vadimv]

probably you could try to play too with: viewConfig:{autoScroll:true} which is browsers native scroll in viewbody, or with the parent layout, or height/maxHeight. If none of the combinations doesn't work then could be the known bugs with the scrolls which many users are encountering in 4.0.7 . Is being said that this is fixed in 4.1

[aharley40]

Try verticalScrollerType:'paginggridscroller' as another grid config

[skirtle]

There are some issues with your layout. You're using an hbox, so you can't rely on auto-sizing based on the children. You also shouldn't rely on grids to auto-size.

Without seeing the rest of your code I can't give you a definitive answer about what your layout should be. The key thing to understand is that parent containers are responsible for determining the sizes of their children, not the other way round.

The main problem is that your grid doesn't have a height set. You can either set a fixed height in pixels or stretch it to fit the container using the align setting on the layout:


layout: {
align: 'stretch',
type: 'hbox'
}

You'll also need to make some changes to the container to set its height.