Add data-cy to element in extJs-CodePudding

I'm searching to add a data-cy to my elements in my ExtJs, but seems that nothing works. The piece where I want to add it is the following one:

                items: [{
                        xtype: 'values',
                        name: 'value_x',
                        hideTrigger: true,
                    }

The whole code works, then the problem is that it cannot recognise it. I've already tried these codes, but any of them works:

    listeners: {
        afterrender: function(cmp) {
            cmp.getEl().set({
                "data-intro": 'some text',
                "data-step": 1
            });
        }
    }

    autoEl: {
        tag: 'div',
        'data-step': '1'
    }

I substitute data-step and data-intro with my data-cy, but nothing. The problem is that it doesn't return any error, but the data-cy (I've tried also with data-attribute and data-intro) is not put into the DOM when I open the localhost.

CodePudding user response：

Update: I solved the problem using simply

autoEl: {
        'data-cy': ’1'
    }

Without specifying the tag.

CodePudding user response：

Unfortunately you are not telling us which Version you are using. From the example I take it that it is the 'CLASSIC' framework and I guess the latest version.

This works in my fiddle:

Ext.define('Fiddle.Container', {
    extend: 'Ext.Container',
    xtype: 'custom',
    
    autoEl: {
        tag: 'div',
        'data-step': '1',
        'data-cy': 2
    }
});

If you do not add the tag, it will automatically use div, so that your answer works too. But for fun exchange div for blockquote and you will see how it works in more detail.

In 'MODERN' you can use:

Ext.define('Fiddle.Custom', {
    extend: 'Ext.Component',
    xtype: 'custom',
    
    template: [{
        reference: 'bodyElement',
        tag: 'blockqoute',
        cls: Ext.baseCSSPrefix   'body-el',
        uiCls: 'body-el',
        'data-cy': 1
    }],
    
});