Горизонтальная прокрутка в панели макета столбца

Question

Меня беспокоит проблема с горизонтальной полосой прокрутки, которая не отображается на моей панели.Мое приложение размещено в виде 6 панелей в колонке.Каждая панель имеет ширину 250 пикселей.Проблема в том, что 6-я панель отображается под 5-й панелью, а не на ее стороне !!

Как отобразить последнюю панель с правой стороны, а не под 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
    }]
});

Каждая панель имеет ширину 250 пикселей, как указано ниже:

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

Answer 1

ColumnLayout определяется как наличие плавающих столбцов, поэтому они всегда будут перенесены, если вы определите фиксированную ширину, превышающую общую ширину контейнера. Вместо этого следует либо использовать ширину в процентах, либо использовать другой стиль макета (или переопределить CSS по умолчанию для макета, чтобы делать то, что вам нужно).