How to add data- attributes to ExtJs rendered html?

Question

Using ExtJs 4.1.

I'm creating a panel (for example) and I would like that the generated html includes one or more "data-" attributes (for example: data-intro="some text" data-step="1")

How can this be done?

Answer 1

After the component has rendered, you could apply the attributes to the top level element representing the component

Example:

var panel = Ext.create('Ext.panel.Panel',{
    title: 'Test',
    width: 500,
    height: 200,
    renderTo: Ext.getBody(),
    listeners: {
        afterrender: function(cmp) {
            cmp.getEl().set({
                "data-intro": 'some text',
                "data-step": 1
            });
        }
    }
});

panel.show();