title: Rendering a checkbox in a Ext.grid.EditorGridPanel
body: <p>I have a web application that uses a lot of ExtJS.  I have a Ext.grid.EditorGridPanel that is bound to a store, and I need for one of the columns to be represented by a checkbox.</p>
  
  <p>I believe I'm close - but I am still having some issues.  Specifically, when I implement the column in the Ext.grid.ColumnModel like so...</p>
  
  <pre><code>{
      dataIndex: 'isActive',
      header: 'Active',
      editor: {
          xtype: 'checkbox',
          trueText: true,
          falseText: false
      },
      renderer: function(value) {
          return "&lt;input type='checkbox'" + (value ? "checked='checked'" : "") + " / &gt;";
      },
  }
  </code></pre>
  
  <p>Well, this sort of works.  The checkboxes that appears upon initial render are correctly checked or unchecked, depending on the value from the database store.  And, you can check or uncheck a checkbox within a column, and the store updates correctly.</p>
  
  <p>The remaining problem is, however, that since the checkbox that appears upon initial rendering and the checkbox that appears upon editing are not exactly the same.  Hence, a checkbox appears to 'jump' within its cell when you click it.  Furthermore, after the checkbox jumps, it is still in its original checked or unchecked selection state.  So, you then have to check or uncheck it again.</p>
  
  <p>It appears this would work fine for say a combobox, since you want a combobox to retain its value after you select it - you would then just select the item you want.  And it's okay if a combobox jumps slightly during rendering.  Not so for a checkbox though.</p>
  
  <p>I'm kind of at my wit's end with this.  Any suggestions?</p>
  
  <p>Thanks in advance,
  Tim</p>