Search code examples
extjs4

Extjs4 how to use XTemplate in tooltip

I have a chart with tooltip in it, what I exactly want to do is I need to set title for tooltip something like this using XTemplate:

tips = { 
    trackMouse: true,
    width: 120,
    height: 23,
    renderer: function(storeItem, item) {
        var myTemplate = new Ext.XTemplate('<p> {Value} </p>')
        myTemplate.overwrite(this.title, {
            Value : storeItem.get(Field)
        });
    }
}

But it is showing error like 'tagname' is null, can anyone give me solution for this. How can I get div id of that tips and how can I set title for tooltip?

Thanks

Solution

  • Try this

    Without XTemplate 

    renderer: function(storeItem, item) {
    this.setTitle(Ext.String.format('<p>{0}</p>', storeItem.get(**title field name**));
}

    With XTemplate

    renderer: function(storeItem, item) {
    var tpl = Ext.create('Ext.XTemplate', '<p>', '{Value}', '</p>');

    this.setTitle(tpl.apply({
        Value: storeItem.get(**title field name**)
    }));
}