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

我没有测试上面的选项，但这应该可以正常工作。

列表不滚动

1 个答案: