ExtJs 3.4 - how to ToolTip a content of a textField component that was pre-loaded

Question

This is the component where I'm trying to put a Tooltip:

this.textFieldStreet = new Ext.form.TextField({
    id          : 'idTextFieldStreet',
    fieldLabel  : 'Street',
    autoCreate  : limitChar(30,30),
    listeners   : {
         render : function(c){
            Ext.QuickTips.register({
                target : c.getEl(),
                html   : '' + Ext.getCmp('idTextFieldStreet').getValue()
                }
            });
         } 
    }
});

In another .js I created the function that define every component like you see before and invoke the function as you see forward:

var componentFormCustomer = new ComponentFormCustomer();

Then I set value like:

componentFormCustomer.textFieldStreet.setValue('Some street info')

Now, here's the problem, I was looking for some ideas to do that and found nothing, I don't know if this is the right way to accomplish the tooltip. Help!

Answer 1

Solution:

Define show listener for created tooltip. In this listener get the value of textfield and update tooltip. With this approach, the tooltip's content will change dynamically and will show the content of tooltip's target.

Ext.onReady(function(){
    Ext.QuickTips.init();

    var textFieldStreet = new Ext.form.TextField({
        renderTo    : Ext.getBody(),
        id          : 'idTextFieldStreet',
        fieldLabel  : 'Street',
        value       : 'Initial value',
        bodyCfg     : {
            tag: 'center',
            cls: 'x-panel-body',
            html: 'Message'
        },
        listeners   : {
            render : function(c) {
                new Ext.ToolTip({
                    target : c.getEl(),
                    listeners: {
                        'show': function (t) {
                            var value = t.target.getValue();
                            t.update(value);
                        }
                    }                   
                });
            }
        } 
    });

    var button = new Ext.Button({
        renderTo : Ext.getBody(),
        text     : 'Change Tooltip',
        handler  : function () {
            textFieldStreet.setValue('New value');
        }
    });
});

Notes:

Tested with ExtJS 3.4.1.