ExtJs4 表格多列排序 multi-sort MVC

在ExtJs中，GridPanel的单列排序是直接支持的，即在column中设置属性 sortabel: true, 并在store里设置remoteSort: true即可。（注意：如果store里的remoteSort不设置成true，则默认只在当前页排序，是不提交后台的本地内存排序。）

一般表格的多列排序是这样的：第一次，点击一列的表头，按照这列进行排序，第二次点击另外一列则在第一列排好序的基础上再按第二列排序......显然这种逻辑前台处理起来会相当复杂，ExtJs也采取了一个折中的方案。

这是官方给的一个例子：

 

http://docs.sencha.com/extjs/4.1.3/#!/example/grid/multiple-sorting.html

效果如图：

这个例子没有使用MVC的结构，使用起来不是很方便。代码有些地方也比较难懂。下面把这个例子改成一个MVC结构的，并且删减掉一些功能。

首先 view：

其次 cotroller：

• click排序的字段后，切换排序的方向（倒序或顺序）,grid重新bindStore.

 

    

• 拖动排序字段drop后，grid重新bindStore ,drop事件的绑定需要在gridpanel的afterrender之后，

• 最后还有一些功能函数：