CODEWITHSUNDEEP
extjstextfieldbackground-color
Rox
Rox

Reputation: 2917

How do I change color of a textfield using ExtJS?

I would like to change the color of a ExtJS textfield, but I don´t succeed. The label is the component that gets the color: 

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]
});

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

How do I change the color?

Upvotes: 4

Views: 45603

Answers (4)

Ramzi Njeim
Ramzi Njeim

Reputation: 16

Expanding on Vasiliy's answer. The style can be set dynamically as follows:

Ext.get('textfield').setStyle('background-color','#ddd');
Ext.get('textfield').setStyle('background-image','none');

Upvotes: 0

Sushith
Sushith

Reputation: 71

You can do it in many ways

Option 1(Global): Change the SASS variable value of "Ext.form.field.Text"

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

Option 2: Create a 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: use form field's "fieldStyle" config

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

Option 4: add "cls" to form field and add your style to your css file

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

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

Upvotes: 1

dbrin
dbrin

Reputation: 15673

A better way to approach this is to set the fieldCls attribute to a CSS class.

Like this:

Field Config:

fieldCls: 'required'

CSS: 

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

Upvotes: 8

Vasiliy Faronov
Vasiliy Faronov

Reputation: 12310

You need to set fieldStyle instead of style. You also need to override the Ext JS default, which sets a background image on the field. Like this:

fieldStyle: 'background-color: #ddd; background-image: none;'

Upvotes: 13

Related Questions