Customize a grid column using renderTpl

Hi,

I am using Sencha Architect 3 and would like to have a filter column header on my columns. I read some posts and tried the following:

1. I defined a custom column class as (I have added an input type=text element and changed a classname) :

Ext.define('FBGConfig.view.FilterColumn', {

extend: 'Ext.grid.column.Column',

alias: 'widget.filterColumn',



requires: [

'Ext.XTemplate'

],



initComponent: function() {

var me = this;



Ext.applyIf(me, {

childEls: [

'headerEl',

'titleEl',

'filterEl',

'triggerEl',

'headerTextEl',

'filterTextEl'

],

renderTpl: [

'<div id="{id}-titleEl" {tipMarkup}class="x-column-header-inner1">',

'<span id="{id}-textEl" class="x-column-header-text{childElCls}">{text}</span>',

'<br/> <input id="12345" type="text"/>',

'<tpl if="!menuDisabled"><div id="{id}-triggerEl" class="x-column-header-trigger{childElCls}">',

'</div>',

'</tpl>',

'</div>{%this.renderContainer(out,values)%}'

]

});



me.callParent(arguments);

}



});


I use gridPanel.reconfigure(currentStore, colDefs) in a contoller action

to set the store and colDefs where colDefs equals:



[

{text: 'Key', dataIndex:'Key', xtype: 'filterColumn'},

{text: 'Value', dataIndex:'Value', width: 320, header: 'Wert', xtype: 'filterColumn'}

]





It seems the xtype of the filterColumn is applied, but my changed renderTpl is not applied.



The rendered Html for the column is (not reflecting any changes except the naming)



<div id="filterColumn-1038-titleEl" class="x-column-header-inner"> <span id="filterColumn-1038-textEl" class="x-column-header-text">Key</span>



<div id="filterColumn-1038-triggerEl" class="x-column-header-trigger"></div>







</div>









What am I doing wrong? (Hint: I am just starting with ExtJs:)). I am not interested so much in plugins, that do filtering, which do not fit my needs, but in the customization abilities of ExtJs components using SA.