wake-up-neo.com

Wie kann ich die Etikettenbreite für einzelne Textfeldetiketten in extjs einstellen?

mit folgendem Code:


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

Dieser Beschriftungstext überlappt den Eingabebereich.

Ich habe versucht, CSS mit verschiedenen Kombinationen von 'cls', 'labelStyle', 'style' und 'width' zu verwenden, aber alle scheinen ignoriert zu werden (zumindest im Hinblick auf die korrekte Einstellung der Etikettenbreite).
Ich füge Elemente dynamisch zu einem Formular hinzu und möchte benutzerdefinierte Etikettenbreiten für jedes Element. Bei anderen Elementen möchte ich nicht den Standardspeicherplatz von 100px für das Etikett, sondern weniger. Ist dies mit dem Standardtextfeld möglich, oder muss ich eine benutzerdefinierte Komponente erstellen, um dies zu tun?

Vielen Dank für jeden Einblick zur Verfügung gestellt.

11
Gerrat

labelWidth ist eine Konfiguration von FormPanel, nicht von Field. Es wird auf Formularebene und nicht auf der Ebene jedes einzelnen Felds gerendert und gesteuert. Das label-Element selbst hat nichts mit dem Layout des Feldcontainers zu tun. Wenn Sie die Markierung betrachten, wird das Label verschoben und das Feld div, das div enthält, ist mit Linksauffüllung versehen, die die "Labelbreite" angibt, die Sie steuern möchten . Diese Auffüllung wird im Code (durch das Layout) als dynamischer Stil zu .x-form-element hinzugefügt, der die Eingabe umschließt. Zum Überschreiben müssen Sie entweder den Layoutcode überschreiben (nicht trivial) oder eine !important-Klasse verwenden, die die Auffüllung pro Feld überschreibt (mithilfe der Feld-ID oder einer benutzerdefinierten cls, die Sie anwenden).

Das heißt, die Etikettenbreiten sollten ästhetisch gleich sein. Sie sind sich nicht sicher, warum Sie diese Konvention brechen wollen?

17
Brian Moeskau

Wenn Sie dies wirklich tun müssen, können Sie am einfachsten ein Feld anstelle eines Formularfelds definieren und es als Container für etwas anderes verwenden.

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

Möglicherweise haben Sie die Möglichkeit, afterRender des Feldes zu hacken:

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})
},
2
Christophe Blin

Ich versuche dies nach mehreren CSS-Klassen, um die gleiche Arbeit zu erledigen, Ich habe alle CSS entfernt, nachdem dies funktioniert, funktioniert wie ein Zauber.

{
    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
}
  • frieden 
1
legrandmawak

Was ich getan habe, ist einfach, labelWidth auf eine leere Zeichenfolge zu setzen und den Browser Zu erledigen. ;-)

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