Scroll and expand are not working properly - extjs

Question

We have one grid panel within Ext.Window. The scroll bar of gridpanel is automatically moving up while scrolling it isn't working properly and when Ext.Window is expanded the grid panel is not expanding. I guess some property has to be set?. Will using autoExpandColumn in gridpanel solve the problem?
extWin=new Ext.Window({
title:"Locate Managed Object",items:[new Ext.grid.GridPanel({
title: "Managed Elements",
region: "center",
height:250,
width:500, renderTo:"tree-id",
viewConfig: {forceFit: true},
store: store,
sm: new GeoExt.grid.FeatureSelectionModel({selectControlelect}),
cm: new Ext.grid.ColumnModel({
defaults: {
sortable: true
},
columns: [
{header:"Managed Elements",dataIndex:"fid"}
]
})
})]
});
extWin.show();
I have added layout:'fit' to this and expanded is working fine but scroll isn't working. Please correct if I'm wrong at any point.

Answer 1

Here is the working example. If you encounter any problem, let me know.
The trick is, layout property. Just set container's layout property fit ( in this case container is window ) and don't give any size property for grid, like width, height.
Sencha Fiddle - GridPanel in Window
Ext.onReady(function(){
function createFakeData(count) {
var firstNames = ['Ed', 'Tommy', 'Aaron', 'Abe', 'Jamie', 'Adam', 'Dave', 'David', 'Jay', 'Nicolas', 'Nige'],
lastNames = ['Spencer', 'Maintz', 'Conran', 'Elias', 'Avins', 'Mishcon', 'Kaneda', 'Davis', 'Robinson', 'Ferrero', 'White'],
ratings = [1, 2, 3, 4, 5],
salaries = [100, 400, 900, 1500, 1000000];
var data = [];
for (var i = 0; i < (count || 25); i++) {
var ratingId = Math.floor(Math.random() * ratings.length),
salaryId = Math.floor(Math.random() * salaries.length),
firstNameId = Math.floor(Math.random() * firstNames.length),
lastNameId = Math.floor(Math.random() * lastNames.length),
rating = ratings[ratingId],
salary = salaries[salaryId],
name = Ext.String.format("{0} {1}", firstNames[firstNameId], lastNames[lastNameId]);
data.push({
rating: rating,
salary: salary,
name: name
});
}
return data;
}
Ext.define('Employee', {
extend: 'Ext.data.Model',
fields: [
{name: 'rating', type: 'int'},
{name: 'salary', type: 'float'},
{name: 'name'}
]
});
// create the Data Store
var store = Ext.create('Ext.data.Store', {
id: 'store',
pageSize: 50,
buffered: true,
purgePageCount: 0,
model: 'Employee',
proxy: {
type: 'memory'
}
});
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 500,
width: 400,
closable: false,
collapsible: true,
layout: {
type: 'fit'
},
items: {
xtype: 'grid',
border: false,
store: store,
loadMask: true,
disableSelection: true,
invalidateScrollerOnRefresh: false,
viewConfig: {
trackOver: false
},
columns: [
{xtype:'rownumberer',width:40,sortable:false},
{text: 'Name',flex:1,sortable:true,dataIndex:'name'},
{text: 'Rating',width:125,sortable:true,dataIndex:'rating'},
{text: 'Salary',width:125,sortable:true,dataIndex:'salary',align:'right',renderer:Ext.util.Format.usMoney}
]}
}).show();
var data = createFakeData(500),
ln = data.length,
records = [],
i = 0;
for (; i < ln; i++) {
records.push(Ext.ModelManager.create(data[i], 'Employee'));
}
store.loadData(records);
});