Ext JS 4 - Felder in einem Formular mit HBox, VBox usw. auslegen

Question

Ich habe eine einfache Ext JS 4 -Form in einem Fenster (MVC -App). Das folgende Beispiel zeigt 4 Felder. Dieses Beispiel ist vereinfacht, aber jetzt muss ich diese Felder nehmen und sie mit Hbox und Vbox (und möglicherweise anderen?) Auslegen und auslegen.)

Wie würde ich zum Beispiel die ersten beiden Felder nehmen und das in eine Hbox oben in der Form geben, damit sie horizontal oben in der Form angezeigt werden, dann den Rest der Felder nehmen und sie in eine Vbox darunter legen Hbox, so dass sie vertikal anzeigen?

(Mein tatsächliches Formular hat viel mehr Felder und ich werde verschiedene andere Hbox/Vboxen haben, aber ich suche nur auf den Start):

Ext.define('ESDB.view.encounter.Edit', {
    extend: 'Ext.window.Window',
    alias : 'widget.encounteredit',
    title : 'Edit Encounter',
    layout: 'fit',
    width: 700,
    autoShow: true,

    initComponent: function() {
        this.items = [

        {
            xtype: 'form',
            items: [
                {
                xtype: 'displayfield',
                name: 'id',
                fieldLabel: 'ID'
                },
                {
                    xtype: 'displayfield',
                    name: 'cid',
                    fieldLabel: 'cid#'
                },
                {
                    xtype: 'displayfield',
                    name: 'addedDate',
                    fieldLabel: 'Added'
                },
                {
                    xtype: 'displayfield',
                    name: 'clientID',
                    fieldLabel: 'Client#'
                }
                     }
     ]

   }

Ich habe verschiedene Beispiele für Layout angesehen Sencha -Seite , Sencha Docs, und schlussendlich noch einer - Dieser letzte hat etwas, das in der Form aussieht - in Form des Formbaum in der Lage, es in ein HBox/Vbox -Layout zu konvertieren. Wenn ich es auf Hbox einstellte, gibt es keine Höhe für die Hbox, sodass ich die Felder nicht sehen kann.

Answer 1

Hier ist Beispiel:

Ext.define('ESDB.view.encounter.Edit', {
    extend: 'Ext.window.Window',
    alias : 'widget.encounteredit',
    title : 'Edit Encounter',
    layout: 'fit',
    width: 700,
    autoShow: true,

    items: [{
        xtype: 'form',
        items: [
            {
                xtype: 'panel',
                border: false,
                layout: 'hbox',
                items: [
                    {
                        xtype: 'displayfield',
                        name: 'id',
                        fieldLabel: 'ID',
                        flex: 0.5
                    },
                    {
                        xtype: 'displayfield',
                        name: 'cid',
                        fieldLabel: 'cid#',
                        flex: 0.5
                    }
                ]
            },
            {
                xtype: 'displayfield',
                name: 'addedDate',
                fieldLabel: 'Added'
            },
            {
                xtype: 'displayfield',
                name: 'clientID',
                fieldLabel: 'Client#'
            }
        ]
    }]
});

Wenn Sie Blöcke in Form von bis nach unten anzeigen möchten, müssen Sie das Layout nicht ändern. Ich habe nur 2 erste Anzeigefelder mit HBox -Layout in das Panel eingepackt (weil Sie nur die erste Zeile teilen möchten).

Answer 2

Sie können nicht zwei Layouts in einem einzigen Panel mischen. Sie müssen also Subpanels verwenden, um die Felder gemäß verschiedenen Regeln auszulegen. Diese Subpanels müssen nicht Formplatten sein (und sollten nicht), nur normale Panels mit Formularlayout (also erhalten Sie Feldetiketten). Ich habe routinemäßig etwas Ähnliches getan, um ein Spalten-ähnliches Layout für die Formfelder zu erreichen (was von ExtJs nicht sehr gut unterstützt wird): Das Top-Formfeld hatte also ein Vbox-Layout, dann gab es einige Unterhöfe mit Hbox-Layout und Unter- Subpanels (oder Feldersets) mit Formlayout, das die Felder enthielt. Das Spaltenlayout könnte in einigen Fällen auch hilfreich sein.

PS Das letzte Beispiel, das Sie erwähnen (2 Spalten mit Feldern) ist tatsächlich ein Formularfeld mit Spaltenlayout, das zwei Felder (Unterhörer) mit Formularlayout enthält. Es ist also ähnlich, was ich oben beschrieben habe.