Customize a grid column using renderTpl

[FSolutionsDev]

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.

[jjohnston]

I'm wondering if this might be due to a known bug where configs that have default values (like renderTpl) are not applied due to the use of applyIf in the generated code.

Give this a try:
In the config pane, find "Process Config" and click the + button. Within that function body, set you childEls and renderTpl values, like:

this.childEls = [...];
this.renderTpl = [...];

That should force your values to overwrite the defaults. Let me know if that helps.

[FSolutionsDev]

Hi jjohnston,

thanks for your quick response.Your suggestions worked for me, finally the template gets rendered!
So it seems your assumption is correct.

May I ask one more question. If I include in the template say a button, to execute a filtering operation, how can I get my controller to react to that button click event and get the string passed in my text input template element. I have so far understood how to set itemIds for querying and some basic ComponentQuery syntax, which I probably can not use here.

Cheers
Thomas

[jjohnston]

That could be tricky. If your button is going to be generated via markup then it can't be selected via ComponentQuery (since it's not a Component.) Probably what you'll need to do is implement some custom logic to be executed afterrender, which manually adds a DOM event listener to your button (or via delegation) and then fires a custom event on the column or grid so your controller can respond to that. This falls more into the realm of custom component extension development than Architect itself, so if you want more detailed help you'll probably have better luck in one of the ExtJS forums.

[jjohnston]

For future developer reference, the applyIf issue is tracked as DSGNR-4923

[FSolutionsDev]

Thanks again, I have jquery in mind to solve that problem. From within the handler defined by jquery I should be able to call my ExtJs classes. I will give that a try.