title: Why the scrollbar doesn't appear this extjs code?
body: <p>I was testing accordian layout and ran into a problem, this is the code</p>
  
  <pre><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&amp;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', {
      fields: [
         {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'
            },
            '-&gt;',
            {
                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();  
  </code></pre>
  
  <p>output is like</p>
  
  <p><img src="https://i.stack.imgur.com/VclTt.jpg" alt="enter image description here"></p>
  
  <p>the scroll bar doesn't appear in the grid. any idea why it doesn't?</p>
  
  <p>Regards</p>
  
  <p>solution1 = Kiran's answer
  solution2 = <a href="http://jsfiddle.net/MmBWF/" rel="nofollow noreferrer">http://jsfiddle.net/MmBWF/</a></p>