Question

我正在测试手风琴布局并遇到问题，这是代码

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();

输出就像

enter image description here

滚动条不会出现在网格中。知道为什么不这样做吗？

此致

solution1 = Kiran的回答 solution2 = http://jsfiddle.net/MmBWF/

Answer 1

您需要为要显示数据的网格指定高度。然后它将计算高度，在溢出时它将显示滚动条。

检查以下链接：

http://jsfiddle.net/NswjV/

Answer 2

问题是您在包含网格的手风琴容器中有一个额外的容器。

我删除了此内容，您可以看到结果here

为什么滚动条没有出现这个extjs代码？

2 个答案: