title: ExtJS 4 Grid custom columns sorting (file manager style)
body: <p>I was about to make a basic file manager using <strong>ExtJS 4</strong>. The problem I faced now is: <em>how to make custom sorting for <a href="http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel" rel="noreferrer">grid panel</a> when clicking the columns</em>.</p>
  
  <p>Imagine we have store fields:</p>
  
  <pre><code>[
      { name: "is_dir", type: "boolean" },
      { name: "name",   type: "string"  },
      { name: "size",   type: "int"     }
  ]
  </code></pre>
  
  <p>And the data which comes from an array:</p>
  
  <pre><code>[
      { is_dir: true,  name: "..",        size: 0    },
      { is_dir: false, name: "file2.txt", size: 512  },
      { is_dir: true,  name: "folder2",   size: 0    },
      { is_dir: false, name: "file3.txt", size: 1024 },
      { is_dir: true,  name: "folder1",   size: 0    },
      { is_dir: true,  name: "file1.txt", size: 1024 },
      // ...
  ]
  </code></pre>
  
  <p>The idea is to make sorting like in any file manager (e.g. <a href="http://www.ghisler.com/screenshots/en/01.html" rel="noreferrer">Total Commander</a>, <a href="http://upload.wikimedia.org/wikipedia/commons/7/79/Midnight-commander.png" rel="noreferrer">MC</a>, <a href="http://www.farmanager.com/img/screen/ctrll.png" rel="noreferrer">FAR</a>, etc) so, that:</p>
  
  <ul>
  <li>the item with name ".." is always placed at the top</li>
  <li>dirs go after ".." (if exists) in sorted order</li>
  <li>files go after dirs (if exist) in sorted order</li>
  </ul>
  
  <p>For example, the output with sorting by name and by size should be:</p>
  
  <pre><code>^ Name           | Size               Name             | ^ Size
  -----------------------               -------------------------
  ..               | 0                  ..               | 0
  folder1          | 0                  folder1          | 0
  folder2          | 0                  folder2          | 0
  file1.txt        | 1024               file2.txt        | 512
  file2.txt        | 512                file1.txt        | 1024
  file3.txt        | 1024               file3.txt        | 1024
  </code></pre>
  
  <p>I've tried to write custom <code>sorterFn</code> for store <code>sorters</code> property, however it didn't help. I believe there should be some easy solution for that.</p>