Why the scrollbar doesn't appear this extjs code?

I was testing accordian layout and ran into a problem, this is the code

var myData = [
    ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
    ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
    ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
    ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
    ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
    ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
    ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
    ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
    ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
    ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
    ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
    ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am']
];

var store = Ext.create('Ext.data.ArrayStore', {
    fi开发者_Go百科elds: [
       {name: 'company'},
       {name: 'price',      type: 'float'},
       {name: 'change',     type: 'float'},
       {name: 'pctChange',  type: 'float'},
       {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ],
    data: myData
});


Ext.create('widget.window', {
      title: 'Activity',
      closable: true,
      closeAction: 'hide',
      width: 250,
      height: 300,
      bodyBorder: true,
      tbar: {
          xtype: 'toolbar',
          ui: 'plain',
          items: [{
              iconCls:'refresh'
          },
          '->',
          {
              xtype: 'displayfield',
              name: 'act_date',
              id: 'act_date',
              value: '2011-08-08'
          }]
      },      
      layout:'accordion',
      border: false,
      items: [{
                title: 'Recent activity',
                items: [{
                            xtype: 'grid',
                            store: store,
                            hideHeaders: true,
                            border: 0,
                            autoScroll: true,
                            columns: [{
                                        text     : 'Company',
                                        flex     : 1,
                                        sortable : false,
                                        dataIndex: 'company'
                                    },{
                                        text     : 'Price',
                                        width    : 75,
                                        sortable : true,
                                        renderer : 'usMoney',
                                        dataIndex: 'price'
                                    }]

                        }]
            },{
                title: 'Recent activity',
                html: ''
            },{
                title: 'Recent activity',
                html: ''
            }]  

}).show();  

output is like

the scroll bar doesn't appear in the grid. any idea why it doesn't?

Regards

solution1 = Kiran's answer solution2 = http://jsfiddle.net/MmBWF/

You need to specify height for the grid which you are trying to display the data.Then it will calculate the height, at the time of overflow it will display the scroll bar.

Check the below link:

http://jsfiddle.net/NswjV/

The problem is you have an extra container within the accordion container containing your grid.

I removed this and you can see the result here