容器需要水平滚动

Question

请有人帮助获取此示例的水平滚动。如果动态添加项目我只有垂直滚动条。

Ext.define('Fiddle.view.main.Main', { 扩展：'Ext.container.Container'，

layout: 'border',
items: [{
    xtype: 'container',
    region: 'north',
    height: 40,
    padding: 12,
    html: 'A great place to add the title of the app and app-wide navigation'
}, {
    region: 'center',
    scrollable : true,
    autoScroll : true,
    width:50,
    title: 'Required "center" region',
    bodyPadding: 12,
    html: 'Our main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app contentOur main app content'
}, {
    region: 'west',
    title: 'West Nav Panel',
    width: 200,
    collapsible: true,
    split: true,
    bodyPadding: 12,
    layout: 'anchor',
    defaultType: 'button',
    defaults: {
        margin: '0 0 12 0',
        anchor: '100%'
    },
    items: [{
        text: 'Nav Button 1'
    }, {
        text: 'Nav Button 2'
    }, {
        text: 'Nav Button 3'
    }]
}]

});

Ext.应用程序（{ 名称：'小提琴'，

// the mainView config will create an instance of 'Fiddle.view.main.Main'
// as the main view of the application by injecting the viewport plugin
// into this instance of 'Fiddle.view.main.Main'
mainView: 'Fiddle.view.main.Main',

launch: function() {
    // application logic to execute after all application views, 
    // controllers, and viewModels are defined
}

});

Answer 1

您可以通过使用可滚动方向获得垂直或水平滚动

 scrollable : {
    direction     : 'horizontal',
    directionLock : true
 },  

你的情况可能是这样
here is the fiddle