Ext JS 6中如何组合hbox与vbox布局实现日期时间分栏排列

没问题，你要的布局可以通过嵌套布局轻松实现——核心思路是用vbox作为外层布局控制垂直行，每行再用hbox来让日期和时间字段横向并排。

你之前的问题所在 #

你直接把4个字段都放在了同一个hbox容器里，所以它们会默认排成一行；而单独给后面两个字段加vbox布局是无效的，因为layout配置是给容器用的，不是给单个字段组件用的。

修改后的完整代码 #

Ext.define('MyApp.view.main.Date', {
    extend: 'Ext.Panel',
    xtype: "secondrow",
    // 外层使用vbox布局，垂直排列两行容器
    layout: {
        type: 'vbox',
        pack: 'center',
        align: 'center' // 让每行内容居中显示
    },
    items: [
        // 第一行：开始日期 + 开始时间，用hbox横向排列
        {
            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%'
            }]
        },
        // 第二行：结束日期 + 结束时间，同样用hbox横向排列
        {
            xtype: 'container',
            layout: 'hbox',
            margin: '10 0 0 0', // 给两行之间添加垂直间距，提升美观度
            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%'
            }]
        }
    ]
});

效果说明 #

• 外层vbox布局会把两个container（每行的容器）垂直堆叠，形成两行结构
• 每个container内部的hbox布局会让日期和时间字段横向并排，实现你要的：

  Start Date Start Time
  End Date End Time
  

• 你可以根据需求调整margin、padding或者align属性，进一步优化布局的间距和对齐方式。

内容的提问来源于stack exchange，提问作者harunB10