Extjs checkbox boxLabel color not changing

I have a checkbox along with a boxLabel and a textarea as shown below:

xtype: 'container',
items: [{
    {
      xtype: 'textarea',
      scrollY: true,
      screenX: true,
      height: 130,
      minHeight: 80,
      top: 10,
      width: 650,
      id: 'testDisplay',
      name: 'testDisplay',
      itemId: 'testDisplay',
      bind: {
         value: some text
      },
      listeners: {
         afterrender: function(cmp) {
            textAreaComp = me.down('#testDisplay');
            textAreaComp.setValue(someInfo);
            const myCheckBox = this.up('container').getComponent('testDisplayChkbox');
            this.el.down('textarea').dom.onscroll = function () {
               if (this.scrollHeight <= (this.scrollTop + this.offsetHeight)) {
                   myCheckBox.setDisabled(false);
                   myCheckBox.el.setStyle('color',red);
               }
            };
         }
      },
    },
    {
        xtype: 'checkboxfield',
        name: 'testDisplayChkbox',
        id: 'testDisplayChkbox',
        itemId: 'testDisplayChkbox',
        checked: false,
        boxLabel: someLabel,
    }
]

I am looking to get the outline of the checkbox and the text color of the boxLabel to change between two colors based when the text area is scrolled to the bottom. I have tried to use cls as well as setting the color dynamically as shown above but cannot get to change the colors of either the checkbox or the boxLabel. Any suggestions on how to get this to work?