ExtJS 6.2：动态添加 afterLabelTextTpl

Question

我正在尝试在各个字段后动态添加一个图标以用作帮助（例如，当用户将鼠标悬停在图标上时，将出现工具提示）。我试图在 beforerender 侦听器中使用 afterLabelTextTpl 配置来执行此操作，但我没有任何运气。谁能建议我如何动态设置 afterLabelTextTpl 或其他/更好的方法？

Answer 1

这应该与经典工具包一起使用：

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.form.Panel', {
            title: 'Form',
            bodyPadding: 8,
            defaultType: 'textfield',
            items: [{
                xtype: 'textfield',
                fieldLabel: 'Field label',
                listeners: {
                    beforerender: function (field, eOpts) {
                        field.afterLabelTextTpl = [
                            '<tpl>',
                            '<span title="Tooltip" style="cursor: pointer"; class="x-fa fa-user"></span>',
                            '</tpl>'
                        ];
                    }
                }
            }],
            renderTo: Ext.getBody()
        });
    }
});

设置

cursor: pointer

是可选的，但它可能很有用。您可以在

style

的

span

部分添加其他样式（填充等）。