ExtJS4.2学习(四)Grid表格中文排序问题

我们在表格中指定某列排序的时候，我发现排序的时候，中文并没有很好的按照规律排序，国际上都使用ASCII码进行排序，而我们却拼音排序，Ext自动排好的中文在我们看起来是一团糟。

如下代码数据：

1

2

3

4

5

6

7

<code>var</code> <code>data =[</code>

<code>        </code><code>[</code><code>'1'</code><code>,</code><code>'啊'</code><code>,</code><code>'描述01'</code><code>],</code>

<code>        </code><code>[</code><code>'2'</code><code>,</code><code>'波'</code><code>,</code><code>'描述02'</code><code>],</code>

<code>        </code><code>[</code><code>'3'</code><code>,</code><code>'呲'</code><code>,</code><code>'描述03'</code><code>],</code>

<code>        </code><code>[</code><code>'4'</code><code>,</code><code>'嘚'</code><code>,</code><code>'描述04'</code><code>],</code>

<code>        </code><code>[</code><code>'5'</code><code>,</code><code>'咯'</code><code>,</code><code>'描述05'</code><code>]</code>

<code>    </code><code>];</code>

为了立刻看到效果，我们通过sorters属性来为Ext.data.ArrayStore设置一个默认的排序方式，如下面的代码：

8

9

<code>var</code> <code>store = </code><code>new</code> <code>Ext.data.ArrayStore({</code>

<code>data:data,</code>

<code>fields:[</code>

<code>   </code><code>{name:</code><code>'id'</code><code>}, </code><code>//mapping:0 这样的可以指定列显示的位置，0代表第1列，可以随意设置列显示的位置</code>

<code>   </code><code>{name:</code><code>'name'</code><code>},</code>

<code>   </code><code>{name:</code><code>'descn'</code><code>}</code>

<code>],</code>

<code>sorters:[{property:</code><code>"name"</code><code>,direction:</code><code>"ASC"</code><code>}] </code><code>//给定一个默认的排序方式</code>

<code>});</code>

效果就是下面这样：

解决办法如下代码，你可以把这段代码放到ext-all.js文件的最后，或者放到HTML页面的最上面，总之要在Ext初始化之后，实际代码调用之前执行。

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

<code>Ext.data.Store.prototype.createComparator = </code><code>function</code><code>(sorters){</code>

<code>    </code><code>return</code> <code>function</code><code>(r1, r2){</code>

<code>        </code><code>var</code> <code>s = sorters[0], f=s.property;</code>

<code>        </code><code>var</code> <code>v1 = r1.data[f], v2 = r2.data[f];</code>

<code>              </code> 

<code>        </code><code>var</code> <code>result = 0;</code>

<code>        </code><code>if</code><code>(</code><code>typeof</code><code>(v1) == </code><code>"string"</code><code>){</code>

<code>            </code><code>result = v1.localeCompare(v2);</code>

<code>            </code><code>if</code><code>(s.direction == </code><code>'DESC'</code><code>){</code>

<code>                </code><code>result *=-1;</code>

<code>            </code><code>}</code>

<code>        </code><code>} </code><code>else</code> <code>{</code>

<code>            </code><code>result =sorters[0].sort(r1, r2);</code>

<code>        </code><code>}</code>

<code>        </code><code>var</code> <code>length = sorters.length;</code>

<code>        </code><code>for</code><code>(</code><code>var</code> <code>i = 1; i&lt;length; i ++){</code>

<code>            </code><code>s = sorters[i];</code>

<code>            </code><code>f = s.property;</code>

<code>            </code><code>v1 = r1.data[f];</code>

<code>            </code><code>v2 = r2.data[f];</code>

<code>            </code><code>if</code><code>(</code><code>typeof</code><code>(v1) == </code><code>"string"</code><code>){</code>

<code>                </code><code>result = result || v1.localeCompare(v2);</code>

<code>                </code><code>if</code><code>(s.direction == </code><code>'DESC'</code><code>){</code>

<code>                    </code><code>result *=-1;</code>

<code>                </code><code>}</code>

<code>            </code><code>} </code><code>else</code> <code>{</code>

<code>                </code><code>result = result || s.sort.call(</code><code>this</code><code>, r1, r2);</code>

<code>        </code><code>return</code> <code>result;</code>

<code>    </code><code>};</code>

<code>};</code>

现在来运行，效果如下：

效果看起来不错。

本文转自shyy8712872 51CTO博客，原文链接：http://blog.51cto.com/shuyangyang/1330925，如需转载请自行联系原作者