title: ExtJS 4, how to multi-select grid row as well as single row is also clickable?
body: <p>I am trying to create a grid using extjs 4.2.2. The grid contains several rows, if I click one row, then  pops up another page which displays the detail info of that row.
  The grid is in a panel, so the view code is:</p>
  
  <pre><code>Ext.define("Application.view.foo.Panel", {
  extend: "Ext.panel.Panel",
  cls: 'foo.panel'
  ...
  items: [
  {
    itemId: "foo-bar",
    xtype: "grid",
    ...
    ,selType: 'checkboxmodel'
    ,columns: [
        xtype: 'templatecolumn'
  </code></pre>
  
  <p>and the code of listening row select event in controller is like:</p>
  
  <pre><code>"panel[cls~=foo.panel] #foo-bar": {
   select: function(selectionModel, record, index) { .... }
  </code></pre>
  
  <p>Now, I am going to add check box for each row in order to mass edit, I added <code>selType: 'checkboxmodel'</code>, but the problem is that I cannot click the check box: <strong>if I click the box, it goes the the detail page, not just being 'checked', cuz the code in controller listens that 'row click' event.</strong></p>
  
  <p>Is there any suggestions to implement it? Thanks in advance.</p>