Come posso impostare la larghezza dell'etichetta su singole etichette di testo in extjs?

Question

con il seguente codice:

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(); 

Questo testo dell'etichetta si sovrappone alla sezione di ingresso (purtroppo non abbastanza punti reputazione di pubblicare un'immagine).

Ho provato a usare css con varie combinazioni di: 'cls', 'labelStyle', 'style' e 'width' ma sembrano tutti ignorati (almeno in termini di impostazione della larghezza dell'etichetta in modo corretto) .
Sto aggiungendo elementi a un modulo in modo dinamico e desidero la larghezza etichetta personalizzata per ogni elemento. Sugli altri elementi, non voglio lo spazio 100px predefinito che riserva per l'etichetta - voglio meno. È possibile con il campo di testo standard o devo creare un componente personalizzato solo per farlo?

Grazie per qualsiasi informazione fornita.

Answer 1

labelWidth è una configurazione di FormPanel, non di Field. È reso e controllato a livello di layout del modulo, non a livello di ogni singolo campo. L'elemento etichetta stesso non ha nulla a che fare con il layout del contenitore del campo: se guardi il markup, l'etichetta è flottante e il div contenente il campo ha il pad sinistro che dà la "larghezza dell'etichetta" che stai cercando di controllare . Questo riempimento viene aggiunto in codice (dal layout) come stile dinamico allo .x-form-element che avvolge l'input. Per eseguire l'override, è necessario sostituire il codice di layout (non banale) o utilizzare una classe !important che sovrascrive il riempimento per campo (utilizzando l'ID del campo o un valore personalizzato cls da applicare).

Detto questo, le larghezze dell'etichetta devono essere uguali, esteticamente parlando allo. Non sei sicuro del motivo per cui vuoi rompere quella convention?

Answer 2

Se davvero devi fare questo, il modo più semplice è quello di definire un pannello invece di un campo modulo e usarlo come contenitore per qualcosa di diverso.

{ 
    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

Quello che ho fatto è semplicemente impostare labelWidth su una stringa vuota e lasciare il browser a fare il suo lavoro. ;-)

{ 
    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

Alla fine, si ha la possibilità di incidere 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

provo questo dopo diverse classi CSS per fare lo stesso lavoro, ho fatto rimuovere tutti i css dopo questo, funziona come un fascino.

{ 
    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 
} 

• pace