在 Ext JS 6 中结合 hbox 和 vbox
Combine hbox with vbox in Ext JS 6
是否可以在 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'
},
有什么建议吗?
一种可能的解决方案是对行使用容器并将面板布局更改为 '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%'
}]
}]
});
是否可以在 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'
},
有什么建议吗?
一种可能的解决方案是对行使用容器并将面板布局更改为 '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%'
}]
}]
});