ExtJS - Alineación de elementos de formulario en el diseño de columna FormPanel

Question

Tengo un FormPanel con 3 columnas. Cada columna tiene un 33% del ancho de FormPanel. Se ve algo como esto:

searchForm = new Ext.FormPanel({ 
    frame: true, 
    title: 'Search Criteria', 
    labelAlign: 'left', 
    labelStyle: 'font-weight:bold;', 
    labelWidth: 85, 
    width: 900, 
    items: [{ 
     layout: 'column', 
     items: [{ // column #1 
      columnWidth: .33, 
      layout: 'form', 
      items: [{ 
       xtype: 'textfield', 
       fieldLabel: 'Banner ID', 
       name: 'bannerID', 
       anchor: '95%', 
      }, 
      new Ext.form.ComboBox({ 
       fieldLabel: 'Advertiser', 
       typeAhead: true, 
       triggerAction: 'all', 
       mode: 'local', 
       emptyText: 'Advertiser', 
       store: advertiserList, 
       valueField: 'id', 
       displayField: 'name' 
      })] // close items for first column 
     }, { 
      columnWidth: .33, 
      layout: 'form', 
      items: [{ 
       xtype: 'textfield', 
       fieldLabel: 'Banner Name', 
       name: 'bannerName', 
       anchor: '95%', 
      }, 
      new Ext.form.ComboBox({ 
       fieldLabel: 'Art Type', 
       typeAhead: true, 
       triggerAction: 'all', 
       mode: 'local', 
       emptyText: 'Art Type', 
       store: artTypesList, 
       valueField: 'id', 
       displayField: 'name' 
      })] // close items for second column 
     }, { 
      columnWidth: .33, 
      layout: 'form', 
      items: [{ 
       xtype: 'hidden' 
      }, 
      new Ext.form.ComboBox({ 
       fieldLabel: 'Art Size', 
       typeAhead: true, 
       triggerAction: 'all', 
       mode: 'local', 
       emptyText: 'Art Size', 
       store: artSizeList, 
       valueField: 'id', 
       displayField: 'name' 
      })] // close items for third column 
     }] 
    }] 
}); // close searchForm FormPanel 

Se visualiza algo que se parece a esto:

El único problema es que quiero el "Arte Tamaño" campo/etiqueta para ser alineado en la misma fila que el "Anunciante "y campos" Tipo de arte ". ¿Hay alguna manera de agregar un elemento "en blanco", de modo que fuerce la entrada hacia la fila correcta? ¿Hay otro enfoque para esto que me falta?

Gracias!

EDIT: Esto funcionó:

{ 
    xtype: 'component', 
    fieldLabel: ' ', 
    labelSeparator: ' ', 
} 

Answer 1

EDIT: Esto funcionó:

  { 
       xtype: 'component', 
       fieldLabel: ' ', 
       labelSeparator: ' ', 
      } 

Answer 2

funcionará la solución, pero no es el ExtJS (/ HTML tablas) camino.

Está utilizando un diseño column para poder usar colspan: 2 en el campo de nombre de pancarta que da como resultado el mismo resultado.
También puede usar rowspan para que su campo cubra dos filas :)

Answer 3

por defecto las etiquetas vacías están ocultas (el campo se desplaza hacia la izquierda). en lugar de poner '& nbsp;' etiqueta ...

fieldLabel: ' ', 
labelSeparator: ' ', 

que puede hacerlo correctamente:

hideEmptyLabel : false 

bruja se alineará su componente interpuesta incluso si no se especifica la etiqueta.

Answer 4

Ninguno de los anteriores parece haber funcionado para mí. Tuve que establecer explícitamente la altura de la celda empy.

xtype: 'label', 
text: ' ', 
flex:1, 
height:22 

Decepcionante para decir lo menos.

Sin embargo, esto solo funciona con el diseño vBox. Si uso anclaje diseño, entonces nada funciona :(