CODEWITHSUNDEEP
javascripthtmlcssextjsextjs4
Gihan Lasita
Gihan Lasita

Reputation: 3053

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', {
    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'
          },
          '->',
          {
              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

enter image description here

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/

Upvotes: 1

Views: 2602

Answers (2)

Chris A
Chris A

Reputation: 368

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

Upvotes: 2

Kiran
Kiran

Reputation: 20313

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/

Upvotes: 3

Related Questions