如何给ExtJs组件添加data-cy属性并成功渲染到DOM

两种常规方案失效的核心原因：
你使用的xtype: values大概率是自定义复合组件，或是继承自Ext.form.field.Base的表单类组件：

• autoEl配置仅作用于组件的根元素，若组件内部重写了渲染逻辑、或是你需要加属性的是组件内部的输入/交互子元素，该配置不会生效
• afterrender回调中直接调用cmp.getEl()拿到的是组件的根外层容器元素，属性会加在这个外层容器上，而非你期望的交互元素上，你查看DOM时找错节点也会以为属性没加上

可行方案 #

方案1：精准定位目标元素后设置属性 #

优先使用组件内置的输入元素引用，找不到再向下查询对应节点，回调替换为boxready（保证组件及内部子元素全部渲染完成），代码示例：

items: [{
    xtype: 'values',
    name: 'value_x',
    hideTrigger: true,
    listeners: {
        boxready: function(cmp) {
            // 优先取表单组件内置的输入元素引用
            let targetEl = cmp.inputEl;
            // 没有内置引用则查询根元素下的对应节点，可根据实际要加属性的节点修改选择器
            if (!targetEl) targetEl = cmp.getEl().down('input') || cmp.getEl();
            targetEl.set({
                'data-cy': 'value_x'
            });
        }
    }
}]

方案2：若需属性加在组件根元素上，强制覆盖渲染逻辑 #

部分自定义组件会覆盖根元素的属性，可在渲染时手动追加属性：

items: [{
    xtype: 'values',
    name: 'value_x',
    hideTrigger: true,
    autoEl: {
        tag: 'div',
        'data-cy': 'value_x_container'
    },
    // 强制渲染自定义属性
    onRender: function() {
        this.callParent(arguments);
        this.getEl().set({'data-cy': 'value_x_container'});
    }
}]

排查技巧 #

在回调中打印元素DOM确认属性是否添加、添加位置是否正确：

boxready: function(cmp) {
    console.log('组件根元素', cmp.getEl().dom);
    console.log('组件内部所有子元素', cmp.getEl().query('*'));
}

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