Ext JS 4 - portant sur les champs d'un formulaire à l'aide hbox, vbox, etc.

Question

Je simple Ext JS 4 forment l'intérieur d'une fenêtre (application de style MVC). L'exemple ci-dessous montre 4 champs. Cet exemple est simplifié, mais maintenant je dois prendre ces champs et les mettent à l'aide hbox et Vbox (et peut-être d'autres?)

Comment puis-je par exemple, prendre les deux premiers champs et mettre le dans une hbox au sommet de la forme afin qu'ils affichent horizontalement, en haut du formulaire, puis prendre le reste des champs et les mettre dans un Vbox ci-dessous que hbox ils affichent verticalement?

(ma forme réelle a beaucoup plus de champs et j'aurai d'autres hbox / vbox, mais je suis à la recherche pour commencer):

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#'
                }
                     }
     ]

   }

J'ai regardé divers exemples de mise en page sencha docs , et enfin autre - ce dernier a quelque chose qui ressemble beaucoup - dans l'arbre de forme, en fieldsets 2 colonnes, il montre une forme avec des objets [] et à l'intérieur il y a un code de mise en page, et j'ai pu obtenir que partiellement au travail, mais n'a pas été en mesure de le convertir en une mise en page de style hbox / Vbox. Lorsque je l'ai mis à hbox, il n'y a pas de hauteur au hbox, donc je ne vois pas les champs.

Answer 1

Voici par exemple:

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#'
            }
        ]
    }]
});

Si vous voulez affiche les blocs en forme de haut en bas, vous n'avez pas besoin de mise en page de changement. J'ai enveloppé seulement 2 premiers champs d'affichage dans le panneau avec la mise en page hbox (parce que vous voulez diviser seulement la première ligne).

Answer 2

Vous ne pouvez pas mélanger deux mises en page dans un seul panneau. Donc, vous avez d'utiliser des panneaux de sous-à-poser les champs selon différentes règles. Ces sous-groupes ne ont pas besoin (et ne doivent pas) être des panneaux de forme, juste panneaux normaux avec la mise en page de formulaire (vous obtiendrez des étiquettes sur le terrain). Je régulièrement fait quelque chose de similaire à obtenir colonne comme la mise en page pour les champs de formulaire (qui ne sont pas très bien pris en charge par ExtJS): de sorte que le panneau de forme supérieure avait une disposition de Vbox, puis il y avait des sous-panneaux avec la mise en page hbox et sous sous-panneaux (ou fieldsets) avec mise en forme qui contient les champs. mise en page de colonne pourrait également être utile dans certains cas.

PS le dernier exemple que vous mentionnez (2 colonnes avec fieldsets) est en fait un panneau de forme avec la mise en page de colonne contenant deux fieldsets (sous-panneaux) avec Dimensionnement. Donc, il est structuré semblable à ce que je viens de décrire ci-dessus.