列布局面板中的水平滚动

Question

我对这个水平滚动条问题在我的Panel中不适用感到困扰。我的应用程序在列布局中被放置为6个面板。每个面板的宽度为250px。问题是第6个面板显示在第5个面板下而不是它的侧面!!

如何在右侧显示最后一个面板而不是在第五个面板下？这是我的代码片段：

var appPanel = new Ext.Panel({
    applyTo: document.body,
    autoWidth: true,
    autoScroll: true,
    title: 'Users & Groups Panel',
    layout:'column',
    items: [{
        items: p1
    },{
        items: p2
    },{
        items: p3
    },{
        items: p4
    },{
        items: p5
    },{
        items: p6
    }]
});

每个面板的宽度为250px，如下所示：

var p1= new Ext.Panel({
    frame:false,
    width:250,      
    collapsible:false,
    title:'Prime Users',
    items: ...
});

Answer 1

ColumnLayout被定义为具有浮动列，因此如果定义超过整个容器宽度的固定宽度，它们将始终换行。您应该使用百分比宽度或使用不同的布局样式（或覆盖布局的默认CSS以执行您需要的操作）。