¿Cómo puedo establecer el ancho de la etiqueta en las etiquetas individuales del campo de texto en extjs?

Question

con el siguiente código:

var win = new Ext.Window({ 
    xtype: 'form', 
    layout: 'form', 
    items: [{ 
     xtype: 'textfield', 
     value: 'test', 
     name: 'testing', 
     labelWidth: 200, 
     fieldLabel: 'This is a really, really long label here', 
     labelStyle: 'white-space: nowrap;' 
    }] 

}).show(); 

Este texto de la etiqueta se superpone a la sección de entrada (lo siento no hay suficientes puntos de reputación para enviar una imagen).

He intentado usar css con varias combinaciones de: 'cls', 'labelStyle', 'style' y 'width', pero todos parecen ignorarse (al menos en términos de establecer correctamente el ancho de la etiqueta) .
Estoy agregando elementos a un formulario dinámicamente, y quiero ancho de etiqueta personalizado para cada elemento. En otros elementos, no quiero el espacio predeterminado de 100 píxeles que reserva para la etiqueta: quiero menos. ¿Es esto posible con el campo de texto estándar, o tengo que crear un componente personalizado solo para hacer esto?

Gracias por cualquier idea proporcionada.

Answer 1

labelWidth es una configuración de FormPanel, no de Field. Se procesa y se controla en el nivel de diseño del formulario, no en el nivel de cada campo individual. El elemento de etiqueta en sí no tiene nada que ver con el diseño del contenedor de campo: si observa el marcado, la etiqueta se flota y el campo que contiene div tiene margen izquierdo que le da el "ancho de etiqueta" que está tratando de controlar . Este relleno se agrega en el código (por el diseño) como un estilo dinámico al .x-form-element que envuelve la entrada. Para anular, deberá sobrescribir el código de diseño (no trivial) o tal vez usar una clase !important que anule el relleno por campo (utilizando el ID de su campo o un cls personalizado que aplique).

Dicho esto, los anchos de etiquetas deben ser iguales, estéticamente hablando. ¿No estás seguro de por qué querrías romper esa convención?

Answer 2

Si realmente tiene que hacer esto, la manera más fácil es definir un panel en lugar de un campo de formulario y usarlo como un contenedor para algo diferente.

{ 
    xtype: 'form', 
    layout: 'form', 
    labelWidth: 100, 
    items: [ 
     // {some fields with labelWidth=100}, 
     { 
      xtype: 'panel', 
      layout: 'form', 
      labelWidth: 200, 
      items: [ 
       xtype: 'textfield', 
       value: 'test', 
       name: 'testing', 
       fieldLabel: 'This is a really, really long label here', 
       labelStyle: 'white-space: nowrap;' 
      ] 
     } 
     // {some fields with labelWidth=100} 
    ] 
} 

Answer 3

Lo que yo se fija simplemente labelWidth a una cadena vacía y dejar que el navegador para hacer su trabajo. ;-)

{ 
    id: 'date0' 
    ,fieldLabel: 'Start' 
    ,labelWidth: '' 
    ,xtype: 'datefield' 
    ,emptyText: 'Select a start date' 
    ,value: Ext.Date.add(new Date(), Ext.Date.DAY, -_duration) 
    // ,width: 100 
} 

Answer 4

Con el tiempo, usted tiene la opción de cortar afterRender del campo:

afterRender: function() { 
    <PARENT>.prototype.afterRender.call(this); 
    this.adjustCustomLabelWidth(300); 
}, 
adjustCustomLabelWidth: function(w) { 
    this.el.parent('.x-form-item').child('.x-form-item-label'). 
      setStyle('width', w); 
    this.el.parent('.x-form-element').setStyle('padding-left', w + 5); 
    this.ownerCt.on('afterlayout', function() { 
     this.el.setStyle('width', this.el.getWidth() - w + 100); 
    }, this, {single: true}) 
}, 

Answer 5

de que este intento después de varias clases CSS para hacer el mismo trabajo, Yo eliminar todo después de css esto, funciona como un encanto.

{ 
    xtype: 'whatever-with-a-field-label', 
    name: 'veryMeaningFullName', 
    fieldLabel: 'very long description to show above a tiny text field', 
    labelStyle: 'width:400px; white-space: nowrap;', 
    //could use width:100% if you want 
    maxWidth: 20 
} 

• paz