html - 如何将数据属性添加到 ExtJs 呈现的 html？

Question

使用 ExtJs 4.1。

我正在创建一个面板（例如），我希望生成的 html 包含一个或多个“数据-”属性（例如data-intro="some text" data-step="1"：）

如何才能做到这一点？

Answer 1

组件渲染后，您可以将属性应用于表示组件的顶级元素

例子：

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();

Answer 2

您可以使用autoElconfig 选项来实现这一点。

{
    xtype: 'panel',
    title: 'My Panel',
    autoEl: {
        tag: 'div',
        'data-step': '1'
    }
}