在列布局面板中水平滚动

Question

I am troubled with this issue of horizontal scrollbar not apprearing in my Panel. My application is put up as 6 panels in column layout. Each panel is 250px in width. The issue is that the 6th panel gets displayed under the 5th panel rather than on its side!!

How do I display the last panel on the right side rather than under the 5th? Here is my code snippet:

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
    }]
});

Each panel is declared with a width of 250px as given below:

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

Answer 1

ColumnLayout is defined as having floated columns, so they'll always wrap if you define fixed widths that exceed the overall container width. You should either use percentage widths instead or use a different layout style (or override the layout's default CSS to do what you need).