How to dynamically change the background-color of a text area field ?

[yyogev]

Hi,

I want to dynamically change the background color of a text area field when a certain checkbox is checked.

Attached is my example attempt to do this:

textarea_bg_example.zip

Thanks,

[scottmartin]

See if this will help:

​

.red-editor textarea
{
    background: none;
    background-color: red;
    padding-top: 5px;
}

.blue-editor textarea
{
    background-color: blue;
}
​​

var form = Ext.create('Ext.form.FormPanel', {
    title      : 'Sample TextArea',
    width      : 400,
    bodyPadding: 10,
    renderTo   : Ext.getBody(),
    items: [{
        xtype     : 'textareafield',
        grow      : true,
        name      : 'message',
        fieldLabel: 'Message',
        anchor    : '100%',
        cls: 'red-editor'
    }]
});


Ext.create('Ext.Button', {
    text: 'Click me',
    renderTo: Ext.getBody(),
    handler: function() {
        var ta = form.down('textareafield');
        ta.addCls('blue-editor');
    }
});
​

Regards,
Scott.

[yyogev]

It works after the CSS class definition was modified.

The same CSS class definition was used with an ExtJS 3 text area field, and apparently in ExtJS 4 the text area field structure was changed so it became necessary to add the 'textarea' selector to the CSS class definition.

Thanks,