dynamicextjstooltipextjs6.2

ExtJS 6.2: Add afterLabelTextTpl Dynamically


I'm trying to dynamically add an icon after various fields to be used as help (i.g. when the user hovers over the icon a tooltip will appear). I was trying to do this using the afterLabelTextTpl config in a beforerender listener, but I'm not having any luck. Can anyone suggest how I might set afterLabelTextTpl dynamically or another/better method?


Solution

  • This should work with classic toolkit:

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

    Setting cursor: pointer is optional but it might be useful. You can add additional styling (padding etc.) in the style part of the span.