2011-08-08 38 views
1

我測試手風琴佈局,碰到一個問題,這是代碼爲什麼滾動條不顯示這個extjs代碼?

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

滾動條不會在電網出現。任何想法爲什麼它不?

問候

解決方法1 = Kiran的答案 溶液2 = http://jsfiddle.net/MmBWF/

+0

我認爲你必須添加'溢出:auto'的'高度之下:300'在'Ext.create(「widget.window」,{'代碼。 –

+0

這實際上是一個CSS屬性給一個滾動條固定高度DIV,而內容更 –

+0

試過般的風格:{溢出:「自動」},但不工作 –

回答

3

您需要爲您正試圖顯示data.Then它將計算高度網格指定高度,在溢流時它會顯示滾動條。

檢查下面的鏈接:

http://jsfiddle.net/NswjV/

+0

感謝。通過設置大小還存在另一個問題,其滾動條那張手風琴 –

+0

下面我試圖手風琴之外創建網格並添加它,那麼它很好地工作http://jsfiddle.net/bfaFS/也許它在extjs中的錯誤? –

+0

我覺得這可能是bug。 – Unknown

2

問題是你有一個包含網格手風琴容器內的額外的容器。

我刪除了這一點,你可以看到結果here