容器需要水平滚动

Question

请有人帮助获得此 Example.if 动态添加项目的水平滚动我只有垂直滚动条。

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.application({ 姓名：'Fiddle',

// 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

容器需要水平滚动

Need Horizantal Scroll for Container

extjs

extjs6-classic