2011-08-08 16 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

のようです。それはなぜですか?

よろしく

あなたはそれがオーバーフロー時に、高さを計算しますdata.Thenを表示しようとしているグリッドの高さを指定する必要がありますソリューション1 =キランの答え 対処方法2 = http://jsfiddle.net/MmBWF/

+0

を見ることができる私はあなたが 'オーバーフローを追加する必要が思う:300' {' 'コードExt.create(「widget.window」、中:'高さの下auto' 。 –

+0

これは実際にはコンテンツがより多くても固定高さのdivにスクロールバーを与えるCSSプロパティです –

+0

はそのようなスタイルを試しました:{overflow: 'auto'}、動作しません –

答えて

3

スクロールバーが表示されます。

チェック下のリンクは:

http://jsfiddle.net/NswjV/

+0

の回答を参照してくださいサイズを設定することによってスクロールバーがアコーディオンの下に行く別の問題があります –

+0

私はアコーディオンの外にグリッドを作成してみましたうまく動作http://jsfiddle.net/bfaFS/おそらくそのextjsのバグ? –

+0

私はバグかもしれないと思います。 – Unknown

2

問題は、あなたのグリッドを含むアコーディオンコンテナ内の余分なコンテナを持っています。

私はこれを削除し、その結果here

関連する問題