title: In an ExtJS custom renderer how do I tell if the column header has been clicked?
body: <p>I have an ExtJs EditorGridPanel with a custom renderer.  The basic idea is to display a checkbox when an item needs to be registered and the text Registered when an item is already registered.  Everything is working swimmingly except for when clicking on the header, the entire grid re-renders and every cell toggles.  Furthermore, the sort does not work.  How to I tell when the header has been clicked so that all my checkboxes do not toggle?  How do I fix the sort for the column?  Right now it does not sort.  Thanks in advance for your help.</p>
  
  <pre><code>var colModel = new Ext.grid.ColumnModel(
      {
      columns: [
          { id: 'ItemOid', header: "ItemOid", width: 100, sortable: true, locked: true, dataIndex: 'ItemOid', hidden: true },
          { id: 'nNumber', header: "N-#", width: 100, sortable: true, locked: true, dataIndex: 'NNumber' },
          { header: "Make", width: 150, sortable: true, dataIndex: 'Make' },
          { header: "Model", width: 150, sortable: true, dataIndex: 'Model' },
          { header: "Register",
              width: 55,
              sortable: true,
              dataIndex: 'Register',
              xtype: 'checkcolumn',
              renderer: renderFunction
          }
      ]
      });
  
  function renderFunction(value, metaData, record, rowIndex, colIndex, store) {
  
      if (!store.getAt(rowIndex).data['ItemNeedsRegistered'])
          return 'Registered';
  
      var isRegistered = store.getAt(rowIndex).data['Registered'];
      var renderString;
  
      if (initialItemRender || isRegistered) {
          renderString = '&lt;input type="checkbox" id="chkRegistered' + rowIndex + '" /&gt;';
          store.getAt(rowIndex).data['Registered'] = false;
      } else {
          renderString = '&lt;input type="checkbox" checked="yes" id="chkRegistered' + rowIndex + '" /&gt;';
          store.getAt(rowIndex).data['Registered'] = true;
      }
  
      return renderString;
  }
  
  var grid = new Ext.grid.EditorGridPanel({
          store: itemStore,
          cm: colModel,
          sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
          viewConfig: {
              forceFit: true
          },
          height: 100,
          split: true,
          region: 'north'
      });
  </code></pre>
  
  <p>Here is my second attempt that also fails, by trying to update the underlying value and it does not check or uncheck.</p>
  
  <pre><code>function renderFunction(value, metaData, record, rowIndex, colIndex, store) {
  
      if (!store.getAt(rowIndex).data['ItemNeedsRegistered'])
          return 'Registered';
  
      var isRegistered = store.getAt(rowIndex).data['Registered'];
      var renderString;
  
      if (initialItemRender || !isRegistered) {
          renderString = '&lt;input type="checkbox" id="chkRegistered' + rowIndex + '"' 
          + ' onClick="updateStoreOnClick(' + rowIndex + ', true);"'
          + ' /&gt;';
      } else {
          renderString = '&lt;input type="checkbox" checked="yes" id="chkRegistered' + rowIndex + '"'
          + ' onClick="updateStoreOnClick(' + rowIndex + ', false);"'                
          + ' /&gt;';
      }
  
      return renderString;
  }
  
  function updateStoreOnClick(rowIndex, value) {
      store.getAt(rowIndex).data['Registered'] = value;
  }
  </code></pre>