[CLOSED] tempating grid header

  1. #1

    [CLOSED] tempating grid header

    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
    Last edited by Daniil; Sep 26, 2012 at 8:01 PM. Reason: [CLOSED]
  2. #2
    Hi,

    I think overriding the renderTpl option can help.
    http://docs.sencha.com/ext-js/4-1/#!...-cfg-renderTpl
  3. #3
    Can you please provide me with an example on how to use it with ext.net.
  4. #4
    Can the template be changed dynamically at run time.
  5. #5
    Quote Originally Posted by SymSure View Post
    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>
    Quote Originally Posted by SymSure View Post
    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?
    Last edited by Daniil; Sep 25, 2012 at 6:38 AM.
  6. #6
    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.
  7. #7
    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/#!...xt.dom.Element
  8. #8
    I have already implemented that but was hoping using templating would be cleaner.
  9. #9
    Unfortunately, not. But using renderTpl definitely can help to organize the things better.

Similar Threads

  1. Replies: 5
    Last Post: Sep 03, 2012, 1:38 PM
  2. Replies: 4
    Last Post: Jul 13, 2012, 7:47 PM
  3. Replies: 16
    Last Post: Feb 23, 2011, 10:03 AM
  4. Grid Header Freeze
    By jordnlvr in forum 1.x Help
    Replies: 1
    Last Post: Mar 27, 2010, 3:52 AM
  5. Replies: 9
    Last Post: Apr 27, 2009, 3:19 PM

Posting Permissions