代码之家 › 专栏 › 技术社区 › harunB10

在ext js 6中将hbox与vbox结合

extjs6 extjs

harunB10 · 技术社区 · 7 年前

是否可以添加类似新行的内容 hbox 布局?我有开始日期,开始时间,结束日期和结束时间。

我想在同一行显示sd和st,然后在ed和et下显示…像这样:

Start Date    Start Time
End Date      End Time

我有这个代码:

Ext.define('MyApp.view.main.Date', {
    extend: 'Ext.Panel',
    xtype: "secondrow",
    layout: {
        type: 'hbox',
        pack: 'center'
    },

    items: [{
        margin: '0 50 0 50',
        padding: '10 20 10 20',
        xtype: 'datefield',
        anchor: '100%',
        fieldLabel: 'Start date',
        name: 'startDate',
        maxValue: new Date()
    }, {
        margin: '0 50 0 50',
        padding: '10 20 10 20',
        xtype: 'timefield',
        name: 'startTime',
        fieldLabel: 'Start Time',
        minValue: '6:00 AM',
        maxValue: '8:00 PM',
        increment: 30,
        anchor: '100%'
    }, {
        margin: '0 50 0 50',
        padding: '10 20 10 20',
        xtype: 'datefield',
        anchor: '100%',
        fieldLabel: 'End date',
        name: 'endDate',
        maxValue: new Date(),
    }, {
        margin: '0 50 0 50',
        padding: '10 20 10 20',
        xtype: 'timefield',
        name: 'endTime',
        fieldLabel: 'EndTime',
        minValue: '6:00 AM',
        maxValue: '8:00 PM',
        increment: 30,
        anchor: '100%'
    }]
});

我试图在结束日期和结束时间添加此项,但没有工作:

layout: {
    type: 'vbox',
    pack: 'center'
},

有什么建议吗?

1 回复 | 直到 7 年前

Narendra Jadhav 7 年前

一种可能的解决方案是使用行容器并将面板布局更改为 'vbox' :

Ext.define('MyApp.view.main.Date', {
    extend: 'Ext.Panel',
    xtype: "secondrow",
    layout: {
        type: 'vbox',
        pack: 'center'
    },

    items: [{
        xtype: 'container',
        layout: 'hbox',
        items: [{
            margin: '0 50 0 50',
            padding: '10 20 10 20',
            xtype: 'datefield',
            anchor: '100%',
            fieldLabel: 'Start date',
            name: 'startDate',
            maxValue: new Date()
        }, {
            margin: '0 50 0 50',
            padding: '10 20 10 20',
            xtype: 'timefield',
            name: 'startTime',
            fieldLabel: 'Start Time',
            minValue: '6:00 AM',
            maxValue: '8:00 PM',
            increment: 30,
            anchor: '100%'
        }]
    }, {
        xtype: 'container',
        layout: 'hbox',
        items: [{
            margin: '0 50 0 50',
            padding: '10 20 10 20',
            xtype: 'datefield',
            anchor: '100%',
            fieldLabel: 'End date',
            name: 'endDate',
            maxValue: new Date(),
        }, {
            margin: '0 50 0 50',
            padding: '10 20 10 20',
            xtype: 'timefield',
            name: 'endTime',
            fieldLabel: 'EndTime',
            minValue: '6:00 AM',
            maxValue: '8:00 PM',
            increment: 30,
            anchor: '100%'
        }]
    }]
});