PDA

View Full Version :  How to dynamically change the background-color of a text area field ?



yyogev
26 Jun 2012, 9:50 AM
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:

36548

Thanks,

scottmartin
26 Jun 2012, 11:45 AM
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
26 Jun 2012, 9:58 PM
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,