Why am I not getting the scroll bar for my gridpanel?

[AesonErryl]

Why am I not getting the scroll bar for my gridpanel even after setting the config 'autoScroll' to true?


Ext.define('App.view.amortizationcalc.AmortizationSched', {
extend: 'Ext.grid.Panel',


alias: 'widget.grdAmortizationSced',
cls: 'grdAmortizationSced',


initComponent: function () {
Ext.apply(this, {
title: 'Amortization Schedule',
store: this.getDummyData(),
autoScroll: true, //I have already made autoScroll to true, but I cannot see the scrollbar for this grid panel. Why is this?
columns: this.getColumnConfig()
});
this.callParent();
},


getColumnConfig: function () {
return [
{ header: '#', dataIndex: 'paynumber', width: 30, align: 'right' },
{ header: 'Date', dataIndex: 'paydate', flex: 1, align: 'right' },
{ header: 'Payment Amount', dataIndex: 'payamount', flex: 1, align: 'right' },
{ header: 'Principal', dataIndex: 'principal', flex: 1, align: 'right' },
{ header: 'Interest', dataIndex: 'interest', flex: 1, align: 'right' },
{ header: 'Total Principal', dataIndex: 'totprincipal', flex: 1, align: 'right' },
{ header: 'Total Interest', dataIndex: 'totinterest', flex: 1, align: 'right' },
{ header: 'Balance', dataIndex: 'balance', flex: 1, align: 'right' }
]
},


getDummyData: function() {
return {
fields: [
'paynumber',
'paydate',
'payamount',
'principal',
'interest',
'totprincipal',
'totinterest',
'balance'
],
data: [
{
paynumber: "1",
paydate: "January 2012",
payamount: "$ 1,000",
principal: "$ 200",
interest: "$ 800",
totprincipal: "$ 200",
totinterest: "$ 800",
balance: "$ 29,800"
},
{
paynumber: "2",
paydate: "February 2012",
payamount: "$ 1,000",
principal: "$ 250",
interest: "$ 750",
totprincipal: "$ 450",
totinterest: "$ 1,550",
balance: "$ 29,550"
},
{
paynumber: "3",
paydate: "March 2012",
payamount: "$ 1,000",
principal: "$ 300",
interest: "$ 700",
totprincipal: "$ 750",
totinterest: "$ 2,250",
balance: "$ 29,250"
},
{
paynumber: "1",
paydate: "January 2013",
payamount: "$ 1,000",
principal: "$ 200",
interest: "$ 800",
totprincipal: "$ 200",
totinterest: "$ 800",
balance: "$ 29,800"
},
{
paynumber: "2",
paydate: "February 2012",
payamount: "$ 1,000",
principal: "$ 250",
interest: "$ 750",
totprincipal: "$ 450",
totinterest: "$ 1,550",
balance: "$ 29,550"
},
{
paynumber: "3",
paydate: "March 2012",
payamount: "$ 1,000",
principal: "$ 300",
interest: "$ 700",
totprincipal: "$ 750",
totinterest: "$ 2,250",
balance: "$ 29,250"
},
{
paynumber: "1",
paydate: "January 2013",
payamount: "$ 1,000",
principal: "$ 200",
interest: "$ 800",
totprincipal: "$ 200",
totinterest: "$ 800",
balance: "$ 29,800"
},
{
paynumber: "2",
paydate: "February 2012",
payamount: "$ 1,000",
principal: "$ 250",
interest: "$ 750",
totprincipal: "$ 450",
totinterest: "$ 1,550",
balance: "$ 29,550"
},
{
paynumber: "3",
paydate: "March 2012",
payamount: "$ 1,000",
principal: "$ 300",
interest: "$ 700",
totprincipal: "$ 750",
totinterest: "$ 2,250",
balance: "$ 29,250"
}, {
paynumber: "1",
paydate: "January 2013",
payamount: "$ 1,000",
principal: "$ 200",
interest: "$ 800",
totprincipal: "$ 200",
totinterest: "$ 800",
balance: "$ 29,800"
},
{
paynumber: "2",
paydate: "February 2012",
payamount: "$ 1,000",
principal: "$ 250",
interest: "$ 750",
totprincipal: "$ 450",
totinterest: "$ 1,550",
balance: "$ 29,550"
},
{
paynumber: "3",
paydate: "March 2012",
payamount: "$ 1,000",
principal: "$ 300",
interest: "$ 700",
totprincipal: "$ 750",
totinterest: "$ 2,250",
balance: "$ 29,250"
}, {
paynumber: "1",
paydate: "January 2013",
payamount: "$ 1,000",
principal: "$ 200",
interest: "$ 800",
totprincipal: "$ 200",
totinterest: "$ 800",
balance: "$ 29,800"
},
{
paynumber: "2",
paydate: "February 2012",
payamount: "$ 1,000",
principal: "$ 250",
interest: "$ 750",
totprincipal: "$ 450",
totinterest: "$ 1,550",
balance: "$ 29,550"
},
{
paynumber: "3",
paydate: "March 2012",
payamount: "$ 1,000",
principal: "$ 300",
interest: "$ 700",
totprincipal: "$ 750",
totinterest: "$ 2,250",
balance: "$ 29,250"
}, {
paynumber: "1",
paydate: "January 2013",
payamount: "$ 1,000",
principal: "$ 200",
interest: "$ 800",
totprincipal: "$ 200",
totinterest: "$ 800",
balance: "$ 29,800"
},
{
paynumber: "2",
paydate: "February 2012",
payamount: "$ 1,000",
principal: "$ 250",
interest: "$ 750",
totprincipal: "$ 450",
totinterest: "$ 1,550",
balance: "$ 29,550"
},
{
paynumber: "3",
paydate: "March 2012",
payamount: "$ 1,000",
principal: "$ 300",
interest: "$ 700",
totprincipal: "$ 750",
totinterest: "$ 2,250",
balance: "$ 29,250"
}, {
paynumber: "1",
paydate: "January 2013",
payamount: "$ 1,000",
principal: "$ 200",
interest: "$ 800",
totprincipal: "$ 200",
totinterest: "$ 800",
balance: "$ 29,800"
},
{
paynumber: "2",
paydate: "February 2012",
payamount: "$ 1,000",
principal: "$ 250",
interest: "$ 750",
totprincipal: "$ 450",
totinterest: "$ 1,550",
balance: "$ 29,550"
},
{
paynumber: "3",
paydate: "March 2012",
payamount: "$ 1,000",
principal: "$ 300",
interest: "$ 700",
totprincipal: "$ 750",
totinterest: "$ 2,250",
balance: "$ 29,250"
}, {
paynumber: "1",
paydate: "January 2013",
payamount: "$ 1,000",
principal: "$ 200",
interest: "$ 800",
totprincipal: "$ 200",
totinterest: "$ 800",
balance: "$ 29,800"
},
{
paynumber: "2",
paydate: "February 2012",
payamount: "$ 1,000",
principal: "$ 250",
interest: "$ 750",
totprincipal: "$ 450",
totinterest: "$ 1,550",
balance: "$ 29,550"
},
{
paynumber: "3",
paydate: "March 2012",
payamount: "$ 1,000",
principal: "$ 300",
interest: "$ 700",
totprincipal: "$ 750",
totinterest: "$ 2,250",
balance: "$ 29,250"
}, {
paynumber: "1",
paydate: "January 2013",
payamount: "$ 1,000",
principal: "$ 200",
interest: "$ 800",
totprincipal: "$ 200",
totinterest: "$ 800",
balance: "$ 29,800"
},
{
paynumber: "2",
paydate: "February 2012",
payamount: "$ 1,000",
principal: "$ 250",
interest: "$ 750",
totprincipal: "$ 450",
totinterest: "$ 1,550",
balance: "$ 29,550"
},
{
paynumber: "3",
paydate: "March 2012",
payamount: "$ 1,000",
principal: "$ 300",
interest: "$ 700",
totprincipal: "$ 750",
totinterest: "$ 2,250",
balance: "$ 29,250"
}, {
paynumber: "1",
paydate: "January 2013",
payamount: "$ 1,000",
principal: "$ 200",
interest: "$ 800",
totprincipal: "$ 200",
totinterest: "$ 800",
balance: "$ 29,800"
},
{
paynumber: "2",
paydate: "February 2012",
payamount: "$ 1,000",
principal: "$ 250",
interest: "$ 750",
totprincipal: "$ 450",
totinterest: "$ 1,550",
balance: "$ 29,550"
},
{
paynumber: "3",
paydate: "March 2012",
payamount: "$ 1,000",
principal: "$ 300",
interest: "$ 700",
totprincipal: "$ 750",
totinterest: "$ 2,250",
balance: "$ 29,250"
}, {
paynumber: "1",
paydate: "January 2013",
payamount: "$ 1,000",
principal: "$ 200",
interest: "$ 800",
totprincipal: "$ 200",
totinterest: "$ 800",
balance: "$ 29,800"
},
{
paynumber: "2",
paydate: "February 2012",
payamount: "$ 1,000",
principal: "$ 250",
interest: "$ 750",
totprincipal: "$ 450",
totinterest: "$ 1,550",
balance: "$ 29,550"
},
{
paynumber: "3",
paydate: "March 2012",
payamount: "$ 1,000",
principal: "$ 300",
interest: "$ 700",
totprincipal: "$ 750",
totinterest: "$ 2,250",
balance: "$ 29,250"
}, {
paynumber: "1",
paydate: "January 2013",
payamount: "$ 1,000",
principal: "$ 200",
interest: "$ 800",
totprincipal: "$ 200",
totinterest: "$ 800",
balance: "$ 29,800"
},
{
paynumber: "2",
paydate: "February 2012",
payamount: "$ 1,000",
principal: "$ 250",
interest: "$ 750",
totprincipal: "$ 450",
totinterest: "$ 1,550",
balance: "$ 29,550"
},
{
paynumber: "3",
paydate: "March 2012",
payamount: "$ 1,000",
principal: "$ 300",
interest: "$ 700",
totprincipal: "$ 750",
totinterest: "$ 2,250",
balance: "$ 29,250"
}
]
}
}
});


And upon calling this view, I only have this:


...
items: [{
xtype: 'grdAmortizationSced',
id: 'amortizationSched'
}]
...


I have tried this on Chrome and Mozilla. Both shows no scrollbars.

[AesonErryl]

And here's the screenshot

[evant]

The important part is the nesting of the views, the grid itself doesn't matter. What is the structure? Which layouts?

[AesonErryl]

Thanks event. But I have already figured out why I am not getting the the grid's scrollbar. I just need to set the config 'width' a value so to allow scrolling.