Объедините hbox с vbox в Ext JS 6 - PullRequest
Новая
       12

Объедините hbox с vbox в Ext JS 6

0 голосов
/ 18 мая 2018

Можно ли добавить что-то вроде новой строки в 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 Ответ

0 голосов
/ 18 мая 2018

Одним из возможных решений является использование контейнеров для строк и изменение макета панели на '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%'
        }]
    }]
});
...