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结合使用

1 个答案: