在 Ext JS 6 中结合 hbox 和 vbox

Question

是否可以在 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'
},

有什么建议吗？

Answer 1

一种可能的解决方案是对行使用容器并将面板布局更改为 '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%'
        }]
    }]
});

在 Ext JS 6 中结合 hbox 和 vbox

Combine hbox with vbox in Ext JS 6

extjs

extjs6