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:
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:
Code:
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>",
   "</tr></tbody></table>");
My ColumnModel:
Code:
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:
Code:
function toggleViewAllFilter(){
   if (Ext.getCmp('clearFilterBtn').isVisible()){
      Ext.getCmp('vewAllGrid').getView().templates.header = oneRowHdrTemplate;
      Ext.getCmp('clearFilterBtn').hide();
   }
   else {
      Ext.getCmp('clearFilterBtn').show();
      Ext.getCmp('vewAllGrid').getView().templates.header = twoRowHdrTemplate;
   }
   Ext.getCmp('viewAllGrid').getView().refresh();
}