需要Horizantal Scroll for Container

时间:2017-04-05 14:09:39

标签: extjs extjs6-classic

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

Ext.define('Fiddle.view.main.Main',{     extend:'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({     名称:'小提琴',

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

});

1 个答案:

答案 0 :(得分:0)

您可以使用可滚动方向

进行垂直或水平滚动
@Entity
public class Customer {
    @Id
    @GeneratedValue(strategy = AUTO)
    private Long id;
    private String name;
    @OneToMany(mappedBy = "customer", cascade = ALL)
    private List<Address> address;
}

在你的情况下,它可能就像这样 here is the fiddle