title: Making ExtJS 4 grid content selectable
body: <p>Grids in ExtJS 4 (Sencha) don’t allow to select content by default. But I want to make this possible.</p>
  
  <p>I've tried this grid config:</p>
  
  <pre><code>viewConfig: {
      disableSelection: true,
      stripeRows: false,
      getRowClass: function(record, rowIndex, rowParams, store){
          return "x-selectable";
      }
  },
  </code></pre>
  
  <p>with these css classes (basically targeting every element I can see in Chrome):</p>
  
  <pre><code>/* allow grid text selection in Firefox and WebKit based browsers */
  
  .x-selectable,
  .x-selectable * {
                  -moz-user-select: text !important;
                  -khtml-user-select: text !important;
      -webkit-user-select: text !important;
  }
  
  .x-grid-row td,
  .x-grid-summary-row td,
  .x-grid-cell-text,
  .x-grid-hd-text,
  .x-grid-hd,
  .x-grid-row,
  
  .x-grid-row,
  .x-grid-cell,
  .x-unselectable
  {
      -moz-user-select: text !important;
      -khtml-user-select: text !important;
      -webkit-user-select: text !important;
  }
  </code></pre>
  
  <p>I know that you can override the grid row template in Ext 3 as below, but I don't know how to do the same in Ext 4:</p>
  
  <pre><code>templates: {
      cell: new Ext.Template(
      '&lt;td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-selectable {css}" style="{style}" tabIndex="0" {cellAttr}&gt;',
             '&lt;div class="x-grid3-cell-inner x-grid3-col-{id}" {attr}&gt;{value}&lt;/div&gt;',
      '&lt;/td&gt;'
      )
  }
  </code></pre>
  
  <p>Any suggestions much appreciated.</p>