列表不滾動

Question

我有一個面板（佈局：'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佈局，因此它預計每個組件的高度。所以，列表滾動會在適合面板的時候出現。

現在對於你的情況，兩個選項可以有：

選項1：

你可以提供一個高度到第一面板（仍然你沒有提供），並添加另一個面板之後，以下詳細信息：

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

這將適合第二個面板內的列表，滾動將自動出現。

選項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', 
    ... 
}); 

我沒有測試上述選項，但這應該很好。