How to add a custom renderer when extending a Ext.grid.TemplateColumn class?

I'd like to extend the Ext.grid.TemplateColumn (http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.TemplateColumn) class to use a predefined Xtemplate, however I'd like it to still be able to run a renderer when one is passed in.

On my understanding, the TemplateColumn doesn't accept a custom renderer, hence I've modified my class to extend from Ext.grid.Column instead. However, then I realized that the renderer that is passed in is a function itself. I'm pretty sure I can't combine two functions into one, so I'm stuck trying to apply my Xtemplate to the column, and yet apply a passed-in renderer.

I've also tried createInterceptor but it doesn't work as well.

this.renderer.createInterceptor(function(value, p, r){
    return tpl.apply(r.data);
});
开发者_Go百科

Will post additional codes if necessary.

---

The TemplateColumn defines its own renderer in its constructor, so it will override any passed in renderer config option. Here is the constructor for TemplateColumn:

constructor: function(cfg){
    Ext.grid.TemplateColumn.superclass.constructor.call(this, cfg);
    var tpl = (!Ext.isPrimitive(this.tpl) && this.tpl.compile) ? this.tpl : new Ext.XTemplate(this.tpl);
    this.renderer = function(value, p, r){
        return tpl.apply(r.data);
    };
    this.tpl = tpl;
}

If you want a custom renderer, you can do a createInterceptor or createSequence on the renderer after it has been set in TemplateColumn prototype's constructor... by first creating a sequence on the constructor, and then creating the interceptor on the renderer using the renderer passed in on the config object... like this:

Ext.grid.TemplateColumn.prototype.constructor = Ext.grid.TemplateColumn.prototype.constructor.createSequence(function(config) {
    this.renderer = this.renderer.createInterceptor(config.renderer);
});