Extjs 布局项目的顺序混乱

Question

我正在尝试像这样在我的面板中显示项目：

我尝试使用绝对布局，但这样文本“选择的设备”消失了，只有“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'
        }]
    }],
});

Answer 1

您可以在第一个容器上使用布局 hbox 和 vbox 组合以及一些 margin。

我跳过了 2 个隐藏视图（不知道它们应该在哪里找到）。

Ext.define('Traccar.view.chart.Chart', {
    extend: 'Ext.panel.Panel',
    xtype: 'chartView',

    requires: [
        'Traccar.view.chart.ChartController'
    ],

    layout: 'vbox',

    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: [{
        margin: "20 0 20 0",
        xtype: 'label',
        id: 'idOpen',
        maxWidth: Traccar.Style.formFieldWidth,
        reference: 'deviceField',
        text: 'Please select one device ',
        cls: 'statistic-panel-title-style'
    }, {
        margin: "20 0 20 0",
        xtype: 'container',
        layout: 'hbox',
        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'
            }
        }, {
            xtype: 'button',
            reference: 'clearButton',
            disabled: true,
            text: Strings.clearAllSelections,
            tooltipType: 'title',
            minWidth: 0,
            handler: 'onClearSeletcions'
        }, {
            xtype: 'button',
            disabled: true,
            reference: 'showButton',
            text: Strings.reportShow,
            tooltip: Strings.reportShow,
            tooltipType: 'title',
            minWidth: 0,
            handler: 'onShowClick'
        }]
    }],
});

Extjs 布局项目的顺序混乱

Extjs Layout items' order mess up

layout

user-interface

extjs