ExtJS中checkbox的boxLabel颜色与勾选框边框无法动态修改问题

你之前的写法不生效有两个核心原因：

1. ExtJS的checkboxfield组件是多层DOM封装，直接修改外层el的样式无法作用到内部的复选框输入框和boxLabel标签，且你原代码中red未加引号属于语法错误，原代码里的screenX属性也写错了，正确属性是scrollX。
2. ExtJS默认主题的复选框样式优先级较高，直接行内修改如果没命中对应DOM节点也不会生效。

实现方案 #

方案1：直接操作组件内部DOM节点（无需额外定义CSS） #

直接调用ExtJS封装好的内部元素属性修改样式，精准命中目标节点：

xtype: 'container',
items: [{
    xtype: 'textarea',
    scrollY: true,
    scrollX: true,
    height: 130,
    minHeight: 80,
    top: 10,
    width: 650,
    id: 'testDisplay',
    name: 'testDisplay',
    itemId: 'testDisplay',
    bind: {
       value: 'some text'
    },
    listeners: {
       afterrender: function(cmp) {
          const textAreaComp = this;
          textAreaComp.setValue('someInfo');
          const myCheckBox = this.up('container').getComponent('testDisplayChkbox');
          this.el.down('textarea').dom.onscroll = function () {
             // 加1px容错，避免浏览器滚动精度问题导致判断失效
             if (this.scrollHeight - this.scrollTop <= this.offsetHeight + 1) {
                 myCheckBox.setDisabled(false);
                 // 修改boxLabel文字颜色
                 myCheckBox.boxLabelEl.setStyle('color', '#ff0000');
                 // 修改复选框边框颜色
                 myCheckBox.inputEl.setStyle({
                     'border-color': '#ff0000',
                     'box-shadow': 'none' // 部分主题默认有阴影，可按需去掉
                 });
             }
          };
       }
    },
},
{
    xtype: 'checkboxfield',
    name: 'testDisplayChkbox',
    id: 'testDisplayChkbox',
    itemId: 'testDisplayChkbox',
    checked: false,
    boxLabel: 'someLabel',
}]

方案2：自定义CSS类切换（更易维护，适合多状态切换场景） #

先在全局样式中定义自定义类，适配ExtJS经典主题，其他主题可根据实际DOM结构调整选择器：

.red-checkbox-status .x-form-checkbox {
    border-color: #ff0000 !important;
}
.red-checkbox-status .x-form-cb-label {
    color: #ff0000 !important;
}

滚动到指定位置时直接给checkbox组件添加类即可：

// 滚动到底部的判断逻辑内替换样式修改代码
myCheckBox.addCls('red-checkbox-status');
// 若需要取消状态则调用 myCheckBox.removeCls('red-checkbox-status')

内容的提问来源于stack exchange，提问作者Ash