Ext JS 4 - Disponir campos en una forma usando HBOX, VBOX, etc.

Question

Tengo un formulario Simple Ext JS 4 dentro de una ventana (aplicación de estilo MVC). El siguiente ejemplo muestra 4 campos. Este ejemplo se simplifica, pero ahora necesito tomar estos campos y presentarlos usando Hbox y VBox (¿y posiblemente otros?)

¿Cómo tomaría, por ejemplo, tomar los dos primeros campos y poner el en un Hbox en la parte superior del formulario para que se muestren horizontalmente, en la parte superior del formulario, luego tome el resto de los campos y los pongan en un vbox debajo de eso? hbox ¿Entonces se muestran verticalmente?

(Mi forma real tiene muchos más campos y tendré varios otros hbox/vboxes, pero solo estoy buscando comenzar):

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

   }

He visto varios ejemplos de diseño Página de Sencha , Sencha Docs, y finalmente otro - Este último tiene algo que parece cercano: en el árbol de formulario, los campos en 2 columnas, muestra un formulario con elementos [] y en el interior un código de diseño, y pude lograr que funcionara parcialmente, pero no estaba Capaz de convertirlo en un diseño de estilo Hbox/VBox. Cuando lo configuré en Hbox, no hay altura en el Hbox, por lo que no puedo ver los campos.

Answer 1

Aquí hay ejemplo:

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 desea mostrar bloques en forma desde hacia abajo, no necesita cambiar el diseño. He envuelto solo 2 primeros campos de visualización en panel con diseño de Hbox (porque solo desea dividir solo la primera fila).

Answer 2

No puede mezclar dos diseños en un solo panel. Por lo tanto, debe usar sub-paneles para diseñar los campos de acuerdo con varias reglas. Estos sub-paneles no necesitan (y no deberían) ser paneles de forma, solo paneles normales con diseño de forma (por lo que obtendrá etiquetas de campo). Rutinariamente hice algo similar para lograr un diseño similar a la columna para los campos de formulario (que no es muy compatible con los extjs): por lo que el panel de forma superior tenía un diseño de Vbox, luego había algunos sub-paneles con diseño de hbox y sub- Sub-paneles (o campos) con diseño de forma que contenía los campos. El diseño de la columna también podría ser útil en algunos casos.

PD que el último ejemplo que menciona (2 columnas con campos) es en realidad un panel de formulario con un diseño de columna que contiene dos campos (subpaneles) con diseño de formulario. Por lo tanto, está estructurado de manera similar a lo que he descrito anteriormente.