Extjs复选框框标签颜色不变

Question

我有一个复选框以及一个 boxLabel 和一个文本区域，如下所示：

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,
    }
]

我正在寻找复选框的轮廓和 boxLabel 的文本颜色，以根据文本区域滚动到底部时在两种颜色之间进行更改。 我曾尝试使用 cls 以及如上所示动态设置颜色，但无法更改复选框或 boxLabel 的颜色。关于如何让它发挥作用的任何建议？

Answer 1

在 ExtJS 中，复选框由更多元素组成，包括图标、框标签等。您可以从复选框访问这些部分并使用applyStyles 添加额外的样式。您可以先将颜色设置为红色，然后使用以下代码滚动到底部时设置为绿色，并查看my updated fiddle。

以下代码适用于 ExtJS 4.2.1。

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.container.Container', {
            renderTo: Ext.getBody(),
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            width: 500,
            items: [{
                xtype: 'textareafield',
                flex: 1,
                value: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?',
                afterRender: function () {
                    const myCheckBox = this.up('container').getComponent('myCheckBox');
                    this.el.down('textarea').dom.onscroll = function () {
                        if (this.scrollHeight <= (this.scrollTop + this.offsetHeight)) {
                            myCheckBox.setDisabled(false);
                            myCheckBox.boxLabelEl.applyStyles({
                                color: 'green'
                            });
                        }
                    };
                }
            }, {
                xtype: 'checkboxfield',
                itemId: 'myCheckBox',
                boxLabel: 'Lorem ipsum',
                checked: false,
                disabled: true,
                afterRender: function () {
                    this.boxLabelEl.applyStyles({
                        color: 'red'
                    });
                }
            }]
        });

    }
});