Javascript 列布局面板中的水平滚动

我对水平滚动条在我的面板中不显示的问题感到困扰。我的应用程序在列布局中显示为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: ...
});

---

ColumnLayout

被定义为具有浮动列，因此如果您定义的固定宽度超过容器的总宽度，则这些列将始终换行。您应该改为使用百分比宽度，或者使用不同的布局样式（或者覆盖布局的默认CSS以完成所需的操作）