Wie ändere ich die Farbe eines textfield-Objekts mit ExtJS?

Möchte ich ändern die Farbe eines ExtJS textfield, aber ich bin nicht gelingen. Das label ist die Komponente, erhält die Farbe:

var textfield= Ext.create('Ext.form.Text', 
    {
        id: 'textfield',
        name: 'name',
        fieldLabel: 'Name',
        style: 'background-color: #ddd;',
        allowBlank: false,
    });

Ext.create('Ext.form.Panel', {
    title: 'Contact Info',
    width: 300,
    bodyPadding: 10,
    renderTo: Ext.getBody(),
    items: [textfield]
});

Beispiel:
http://jsfiddle.net/3ZZcZ/

Wie ändere ich die Farbe?

InformationsquelleAutor Rox | 2012-02-09

  1. 11

    Müssen Sie fieldStyle statt style. Sie müssen auch überschreiben, den Ext-JS "Standard", legt ein Hintergrundbild auf dem Feld. Wie diese:

    fieldStyle: 'background-color: #ddd; background-image: none;'
    dies kann nicht dynamisch gesetzt werden?
    Ja, wie würden Sie verändern diese dynamisch?

    InformationsquelleAutor Vasiliy Faronov

  2. 8

    Einen besseren Weg, dies zu nähern, ist der fieldCls Attribut für eine CSS-Klasse.

    Wie diese:

    Feld Config:

    fieldCls: 'required'

    CSS: 

    .required {
    background-image:none;
    background-color:#FFFFCC;
}

    InformationsquelleAutor dbrin

  3. 1

    Können Sie es in vielerlei Hinsicht tun

    Option 1(Global): Änderung des SASS-variable den Wert "Ext.form.Feld.Text"

    eg: $form-text-field-color: #003168 !default;

    Option 2: Erstellen Sie ein mixin

    eg:

file -> sass/src/form/field/Text.scss

@include extjs-text-field-ui(
    $ui: 'customName',
    $ui-color: #003168
);

js: 
    {
        xtype: 'textfield',
        ui: 'customName'
    }

    Option 3: verwenden Sie Formular-Feld "fieldStyle" config

    eg:
{
    xtype: 'textfield',
    fieldLabel: 'Test Label',
    fieldStyle: 'font-weight: bold; color: #003168;',
    labelWidth: 170
}

    Option 4: add "cls" - Feld und fügen Sie Ihren Stil zu Ihrer css-Datei

    eg: 
js:
{
    xtype: 'form',
    defaults: {
        cls: 'test-class'
    }
}

CSS:
.test-class .x-form-text {
    color: #003168;
}

    InformationsquelleAutor Sushith

  4. 0

    Erweiterung auf Vasiliy Antwort. Die Schrift kann dynamisch festgelegt werden, wie folgt:

    Ext.get('textfield').setStyle('background-color','#ddd');
Ext.get('textfield').setStyle('background-image','none');
    Dies ist die änderung der hintergrund-Farbe, nicht das Textfeld.

    InformationsquelleAutor Ramzi Njeim

Schreibe einen Kommentar