Ext JS 4 - layout di campi di un form utilizzando hbox, vbox, ecc

Question

Ho una semplice Ext JS 4 forma all'interno di una finestra (MVC stile app). L'esempio seguente mostra 4 campi. Questo esempio è semplificato, ma ora ho bisogno di prendere questi campi e li lay out utilizzando hbox e VBOX (e possibilmente altri?)

Come potrei, per esempio, prendere i primi due campi e mettere il in una hbox nella parte superiore del modulo in modo da visualizzare in orizzontale, nella parte superiore del modulo, poi prendere il resto dei campi e metterli in un VBOX inferiore a quello hbox in modo da visualizzare in verticale?

(la mia forma attuale ha molto più campi e avrò vari altri HBOX / vbox, ma sto solo cercando di iniziare):

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

   }

Ho guardato vari esempi di layout di pagina sencha , Sencha docs , e, infine, un altro - quest'ultimo ha qualcosa che sembra vicino - nella struttura di modulo, in fieldsets 2 colonne, si vede un modulo con gli elementi [] e c'è dentro un po 'di codice del layout, e sono stato in grado di ottenere che a parte il lavoro, ma non era in grado di convertirlo in un layout in stile hbox / vbox. Quando ho impostato a hbox, non c'è altezza al hbox, quindi non posso vedere i campi.

Answer 1

Ecco esempio:

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

Se si vuole mostra blocchi in forma dall'alto verso il basso, non avete bisogno di layout di cambiamento. Ho avvolto solo 2 primi campi di visualizzazione in pannello con il layout hbox (perché si vuole dividere solo prima fila).

Answer 2

Non è possibile mescolare due layout in un unico pannello. Quindi, è necessario utilizzare gruppi secondari per lay-out i campi secondo varie regole. Questi gruppi secondari non hanno bisogno (e non devono) essere pannelli formato, solo pannelli normali con layout di forma (in modo da otterrete le etichette dei campi). Io abitualmente fatto qualcosa di simile per raggiungere colonna-come layout per i campi del modulo (che non è molto ben supportato da extjs): così il pannello top della forma ha avuto un layout vbox, poi ci sono stati alcuni sotto-pannelli con il layout hbox e sub- sotto-pannelli (o fieldsets) con la layout forma che conteneva i campi. layout di colonna potrebbe anche essere utile in alcuni casi.

PS nell'ultimo esempio si parla (2 colonne con fieldsets) è in realtà un pannello formato con la layout colonna contenente due fieldsets (pannelli secondari) con la layout forma. Quindi è strutturato in modo simile a quello che ho descritto sopra.