如何在ExtJs渲染的html中添加数据属性?

z8dt9xmd  于 2023-10-18  发布在  其他
关注(0)|答案(3)|浏览(124)

使用ExtJs 4.1.
我正在创建一个面板(例如),我希望生成的html包含一个或多个“data-”属性(例如:data-intro="some text" data-step="1"
如何做到这一点?

0kjbasz6

0kjbasz61#

在组件呈现之后,您可以将属性应用于表示组件的顶级元素
范例:

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

mlnl4t2r2#

您可以使用autoEl配置选项来实现这一点。

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

0x6upsns3#

{
    xtype: 'button',
    text: 'Button',
    ariaAttributes: {
        'aria-test-id': 'foobar',
        'data-test-id': 'foobar' // looks like any attribute can be inserted this way
    }
}

相关问题