1. #1
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196
    Vote Rating
    6
    Answers
    5
    yyogev is on a distinguished road

      0  

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

    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,
    Yaron Yogev

    IT Software Developer

  2. See if this will help:

    Code:
    .red-editor textarea
    {
        background: none;
        background-color: red;
        padding-top: 5px;
    }
    
    .blue-editor textarea
    {
        background-color: blue;
    }
    ​​
    Code:
    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.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,324
    Vote Rating
    486
    Answers
    706
    scottmartin has a spectacular aura about scottmartin has a spectacular aura about scottmartin has a spectacular aura about

      0  

    Default

    See if this will help:

    Code:
    .red-editor textarea
    {
        background: none;
        background-color: red;
        padding-top: 5px;
    }
    
    .blue-editor textarea
    {
        background-color: blue;
    }
    ​​
    Code:
    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.

  4. #3
    Ext Premium Member yyogev's Avatar
    Join Date
    Jun 2009
    Location
    Shoham, Israel
    Posts
    196
    Vote Rating
    6
    Answers
    5
    yyogev is on a distinguished road

      0  

    Thumbs up The CSS selector was the problem

    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,
    Yaron Yogev

    IT Software Developer

Thread Participants: 1

Tags for this Thread