Results 1 to 2 of 2

Thread: [Solved]Swapping Grid Header Templates

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User MtAiryEd's Avatar
    Join Date
    Dec 2007
    Vote Rating

    Default [Solved]Swapping Grid Header Templates

    I have a grid where the user may want to filter the results. I placed the filter text fields in the grid header using a header template I found here. I don't have filtering for all columns, so I add the filter fields for each column which I want to allow filtering. Since the filtering may not always be desired, I want to put a button near the grid which will show/hide the filter text fields row.

    I am using a header template to show the text fields. This all works. Now, I want to write the code to hide/show that row. I cannot get the swapping of header templates to work. My "toggleViewAllFilter" executes, and I do hide the 'clear filter values" button, but the template is not replaced by the template that does not have the text fields.

    I've seen examples here where folks do the refresh after assigning a different template. The only difference I see in my code is my template is a header template, as opposed to just a template.

    I've reduced the number of columns here for clarity.

    Hopefully all this is clear for you to help me.

    Here is the grid code:
    var viewAllGrid = new Ext.grid.GridPanel({
       cm: viewAllCM,
       sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
       id: "viewAllGrid",
       bodyStyle: 'overflow: scroll',
       store: allData,
       viewConfig: {
          forceFit: false,
          enableRowBody: false,
          templates: {
             header: oneRowHdrTemplate   // my first view template
       listeners: {
          render: function(){
             var cm = this.getColumnModel();
             var columns = cm.getColumnCount();
             for (var i=0; i < columns; i++){
                if (cm.config[i].search == true){
                   var tmp = new Ext.form.TextField({
                      id: cm.config[i].dataIndex + "Criteria",
                      renderTo: "span_" + cm.config[i].dataIndex + "Criteria",
                      enableKeyEvents: true
                   tmp.addListener('keyup', collectKeyPresses, this, {buffer: 750});
                   tmp.setSize(cm.getColumnWidth(i) - 2);
                }  //end if
             } // end for
          } //end render func
       }  // end listeners
    } // end grid

    My templates:
    var oneRowHdrTemplate = new Ext.XTemplate(
       '<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}"><thead><tr class="x-grid-hd-row">{cells}</tr></thead></table>");
    var twoRowHdrTemplate = new Ext.XTemplate(
       '<table border="0" cellspacing="0" cellpadding="0" style="{tstyle}"><thead><tr class="x-grid-hd-row">{cells}</tr></thead><tbody><tr>',
       "<td><span id='span_" + viewAllCM.config[0].dataIndex + "Criteria'></span></td>",
       "<td><span id='span_" + viewAllCM.config[1].dataIndex + "Criteria'></span></td>",
    My ColumnModel:
    var viewAllCM = new Ext.grid.ColumnModel([
          header: "Create Time",
          dataIndex: 'createTime',
          width: 120,
          search: false
          header: "Person",
          dataIndex: 'person',
          width: 120,
          search: true
    My toggle function:
    function toggleViewAllFilter(){
       if (Ext.getCmp('clearFilterBtn').isVisible()){
          Ext.getCmp('vewAllGrid').getView().templates.header = oneRowHdrTemplate;
       else {
          Ext.getCmp('vewAllGrid').getView().templates.header = twoRowHdrTemplate;

  2. #2
    Sencha User MtAiryEd's Avatar
    Join Date
    Dec 2007
    Vote Rating


    My apologies. I just noticed that the refresh() function has the Boolean parameter "HeadersToo".

    used it. it works.

    Sorry to waste your time if you've attempted to answer this message.


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts