Extjs中如何实现textarea滚动到底部后自动启用下方checkbox

核心逻辑 #

• 给checkbox默认添加disabled: true配置，实现初始化禁用效果
• 监听textarea的滚动事件，每次滚动时校验是否已滚动至内容底部
• 新增初始化校验逻辑：若textarea初始内容高度小于组件可视高度，无需滚动直接启用checkbox
• 滚动到底判定逻辑：滚动条垂直偏移量 + 文本域可视高度 >= 文本域内容总高度

完整修改后代码 #

xtype: 'container',
items: [{
    xtype: 'textarea',
    scrollY: true,
    scrollX: true, // 原配置笔误screenX应为scrollX
    height: 130,
    minHeight: 80,
    top: 10,
    width: 650,
    id: 'testDisplay',
    name: 'testDisplay',
    itemId: 'testDisplay',
    bind: {
        value: 'some text'
    },
    listeners: {
        afterrender: function(cmp) {
            const textAreaComp = me.down('#testDisplay');
            const checkBoxComp = me.down('#testDisplayChkbox');
            textAreaComp.setValue(someInfo);
            
            // 绑定滚动事件监听
            textAreaComp.getEl().on('scroll', function() {
                const dom = textAreaComp.getEl().dom;
                // 判断是否滚动到底部
                if (dom.scrollTop + dom.clientHeight >= dom.scrollHeight) {
                    checkBoxComp.enable();
                }
                // 若需要滚动离开底部后重新禁用checkbox，可新增以下分支
                // else {
                //     checkBoxComp.disable();
                // }
            });
            
            // 初始化校验：内容不足无需滚动时直接启用checkbox
            const initDom = textAreaComp.getEl().dom;
            if (initDom.scrollHeight <= initDom.clientHeight) {
                checkBoxComp.enable();
            }
        }
    }
}, {
    xtype: 'checkboxfield',
    name: 'testDisplayChkbox',
    id: 'testDisplayChkbox',
    itemId: 'testDisplayChkbox',
    checked: false,
    boxLabel: someLabel,
    disabled: true // 初始化禁用配置
}]

注意：代码中的me为当前视图/控制器的作用域引用，可根据实际代码上下文调整为对应的作用域变量即可。

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