PDA

View Full Version : [CLOSED] tempating grid header



SymSure
Sep 21, 2012, 9:04 PM
Hi, I am wondering how to template the grid header. I would like to have icons and the text value in some of the grid header based on some property of the column.while some will just have text.

How can this be achieved.

Thanks

Daniil
Sep 24, 2012, 9:26 AM
Hi,

I think overriding the renderTpl option can help.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-renderTpl

SymSure
Sep 24, 2012, 6:45 PM
Can you please provide me with an example on how to use it with ext.net.

SymSure
Sep 24, 2012, 9:06 PM
Can the template be changed dynamically at run time.

Daniil
Sep 25, 2012, 7:34 AM
Can you please provide me with an example on how to use it with ext.net.

I would override this way.

Example


<script type="text/javascript">
var myRenderTpl =
'<div id="{id}-titleEl" {tipMarkup}class="' + Ext.baseCSSPrefix + 'column-header-inner">' +
'<span id="{id}-textEl" class="' + Ext.baseCSSPrefix + 'column-header-text">' +
'{text} Hello!' +
'</span>' +
'<tpl if="!menuDisabled">'+
'<div id="{id}-triggerEl" class="' + Ext.baseCSSPrefix + 'column-header-trigger"></div>'+
'</tpl>' +
'</div>' +
'{%this.renderContainer(out,values)%}';
</script>

<ext:Column runat="server" Text="Test" DataIndex="test">
<CustomConfig>
<ext:ConfigItem Name="renderTpl" Value="myRenderTpl" Mode="Raw" />
</CustomConfig>
</ext:Column>



Can the template be changed dynamically at run time.

I think it will require re-rendering. Please clarify what exactly changes do you need to apply on the fly?

SymSure
Sep 25, 2012, 2:41 PM
well I will want to be able to add an icon beside the text of the header based on some properties of the column that I set or new properties I add to the column. so some column will have only text and some will have text and multiple icons. so when the value changes i would like to r-render the header and maybe the column that had text only earlier may now have text and icons and they one with text and icons could change to just text or some of of the icons removed. For example if a column header is selected and it is made a key field I would like to have a key icon placed beside the text.

Daniil
Sep 25, 2012, 7:35 PM
There is a single way to re-apply the renderTpl - it's re-rendering. So, I don't think it is an option in your case.

You will need to manage icons on the fly using Ext.Element API.
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.dom.Element

SymSure
Sep 26, 2012, 7:41 PM
I have already implemented that but was hoping using templating would be cleaner.

Daniil
Sep 26, 2012, 9:01 PM
Unfortunately, not. But using renderTpl definitely can help to organize the things better.