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'
                    });
                }
            }]
        });

    }
});

Extjs复选框框标签颜色不变

Extjs checkbox boxLabel color not changing

javascript

checkbox

extjs

textarea

sencha-touch-2