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