Hybrid View

  1. #1
    Sencha User MtAiryEd's Avatar
    Join Date
    Dec 2007
    Posts
    93
    Vote Rating
    0
    MtAiryEd is on a distinguished road

      0  

    Default [Solved]Swapping Grid Header Templates

    [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:
    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();
    }

  2. #2
    Sencha User MtAiryEd's Avatar
    Join Date
    Dec 2007
    Posts
    93
    Vote Rating
    0
    MtAiryEd is on a distinguished road

      0  

    Default


    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.

    Ed

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar