スクロールしないリスト

Question

2つの項目を持つパネル（レイアウト： 'vbox'）があります。パネルとリスト。

コード

this.currentFolderPnl = new Ext.Panel({ 
    cls:'document-current-folder-panel', 
    html:'/' 
}); 

this.list = new Ext.List({ 
    scroll: 'vertical', 
    cls:'document-list', 
    id: 'document-list', 
    store: app.stores.Document, 
    itemTpl: app.templates.document 
}); 

app.views.DocumentList.superclass.constructor.call(this, { 
    selectedCls : "x-item-selected", 
    dockedItems: [{ 
     xtype: 'toolbar', 
     ui:'dark', 
     title: 'Documents', 
     items:[this.backBtn,{xtype:'spacer'},this.newBtn] 
    }], 
    layout: {type:'vbox',align:'stretch'}, 
    items: [ 
     this.currentFolderPnl, 
     this.list 
    ] 
}); 

私は多くのことを試してみましたが、何も働きました。誰かが何をすべきか教えてもらえますか？子要素が親要素よりも（高さまたは幅のいずれか、または両方）のサイズが大きいながら

おかげ

Answer 1

スクロールにのみ表示されます。 vboxレイアウトを使用しているため、各コンポーネントの高さが必要です。したがって、パネルの内側に収まる間にリストのスクロールが行われます。

は、今すぐあなたのケースのために、2つのオプションがあり使用できます

オプション1：

あなたが最初のパネルに高さを提供（これはまだあなたが提供していない）と、別のパネルを追加することができますそれ以降の詳細は次のとおりです。

{ 
    flex : 1, 
    layout : 'fit', 
    items : [this.list] 
} 

これは2番目のパネル内のリストに適合し、スクロールが自動的に行われます。

オプション2：

ここでは、すなわち、任意のレイアウトを提供していないデフォルトのレイアウト（AutoContainerLayout）を使用します。そして、上記の組み合わせがうまくいくでしょう（最初のパネルの高さを上げる方が良い）。リストからスクロールを削除し、スクロールをメインパネルに垂直に追加します。この方法で：

this.currentFolderPnl = new Ext.Panel({ 
    ... 
    height : 50 
}); 

this.list = new Ext.List({ 
    scroll: FALSE, 
    .... 
}); 

app.views.DocumentList.superclass.constructor.call(this, {   
    scroll : 'vertical', 
    ... 
}); 

私は上記のオプションをテストしませんでしたが、これは正常に動作するはずです。