【发布时间】：2020-12-20 14:16:50
【问题描述】：
我正在尝试像这样在面板中显示项目：
我尝试使用绝对布局，但这样文本“已选择设备”消失了，仅显示“Anzeigen”按钮。
使用布局列，结果如下：
如何修复 UI 以显示第一张图片中的项目？
这是我的代码：
Ext.define('Traccar.view.chart.Chart', {
extend: 'Ext.panel.Panel',
xtype: 'chartView',
requires: [
'Traccar.view.chart.ChartController'
],
layout: 'column',
//layout: 'absolute',
controller: 'chart',
defaults: {
layout: 'form',
xtype: 'container',
defaultType: 'textfield',
},
tbar: {
componentCls: 'toolbar-header-style',
defaults: {
xtype: 'button',
disabled: true,
tooltipType: 'title'
},
items: [{
xtype: 'tbtext',
html: 'Statistics',
baseCls: 'x-panel-header-title-default'
}, {
xtype: 'tbfill',
disabled: false
}, {
handler: 'showMap',
reference: 'showMapButton',
glyph: 'xf279@FontAwesome',
stateful: false,
enableToggle: false,
disabled: false,
tooltip: Strings.centerlisttomap
}]
},
items: [{
xtype: 'label',
id: 'idOpen',
maxWidth: Traccar.Style.formFieldWidth,
reference: 'deviceField',
text: 'Please select one device ',
cls: 'statistic-panel-title-style'
}, {
items: [{
fieldLabel: Strings.reportPeriod,
reference: 'periodField',
xtype: 'combobox',
store: 'ReportPeriods',
disabled: true,
collapseOnSelect: true,
editable: false,
valueField: 'key',
displayField: 'name',
queryMode: 'local',
value: 'today',
listeners: {
change: 'onPeriodChange'
}
}]
}, {
items: [{
xtype: 'fieldcontainer',
layout: 'vbox',
reference: 'fromContainer',
hidden: true,
fieldLabel: Strings.reportFrom,
items: [{
xtype: 'datefield',
reference: 'fromDateField',
startDay: Traccar.Style.weekStartDay,
format: Traccar.Style.dateFormat,
value: new Date()
}, {
xtype: 'customTimeField',
reference: 'fromTimeField',
value: (new Date(new Date().setHours(0, 0, 0, 0)))
}]
}]
}, {
items: [{
xtype: 'fieldcontainer',
layout: 'vbox',
reference: 'toContainer',
hidden: true,
fieldLabel: Strings.reportTo,
items: [{
xtype: 'datefield',
reference: 'toDateField',
startDay: Traccar.Style.weekStartDay,
format: Traccar.Style.dateFormat,
value: (new Date(new Date().setDate(new Date().getDate() + 1)))
}, {
xtype: 'customTimeField',
reference: 'toTimeField',
value: (new Date(new Date().setHours(0, 0, 0, 0)))
}]
}]
}, {
items: [{
xtype: 'button',
reference: 'clearButton',
disabled: true,
text: Strings.clearAllSelections,
tooltipType: 'title',
minWidth: 0,
handler: 'onClearSeletcions'
}]
}, {
items: [{
xtype: 'button',
disabled: true,
reference: 'showButton',
text: Strings.reportShow,
tooltip: Strings.reportShow,
tooltipType: 'title',
minWidth: 0,
handler: 'onShowClick'
}]
}],
});
【问题讨论】：
标签： user-interface layout extjs