摘自深入浅出ExtJs
Ext默认使用ASCII进行排序,为了让表格实现中文排序功能,需要重写Ext.data.Store的applySort函数
代码如下:
Ext.data.Store.prototype.applySort = function(){
if(this.sortInfo && !this.remoteSort){
var s = this.sortInfo,
f = s.field;
var st = this.fields.get(f).sortType;
var fn = function(r1,r2){
var v1 = st(r1.data[f]),v2 = st(r2.data[f]);
if(typeof(v1) == 'string'){
return v1.localeCompare(v2);
}
return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
};
this.data.sort(s.direction,fn);
if(this.snapshot && this.snapshot != this.data){
this.snapshot.sort(s.direction,fn);
}
}
};
可以将这段代码加到ext-all.js文件的最后,或者放到HTML页面的最上面,总之是要在EXT初始化之后,实际代码调用之前执行.
一般实现结构
Ext.data.Store.prototype.applySort = function(){
........................
}
Ext.onReady(function(){
................
});
完整示例代码:
Ext.onReady(function(){
//中文排序功能,重写Ext.data.Store的applySort函数
Ext.data.Store.prototype.applySort = function(){
if(this.sortInfo && !this.remoteSort){
var s = this.sortInfo,
f = s.field;
var st = this.fields.get(f).sortType;
var fn = function(r1,r2){
var v1 = st(r1.data[f]),v2 = st(r2.data[f]);
if(typeof(v1) == 'string'){
return v1.localeCompare(v2);
}
return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
};
this.data.sort(s.direction,fn);
if(this.snapshot && this.snapshot != this.data){
this.snapshot.sort(s.direction,fn);
}
}
};
//列定义:
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
var data2= [['1','啊','descn1'],
['2','啵','descn2'],
['3','呲','descn3'],
['4','嘚','descn4'],
['5','咯','descn5'],
];
//数据存储
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data2),
reader: new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'descn'}
]),
sortInfo:{field:'name',direction:'ASC'}
});
//初始化数据
store.load();
var grid = new Ext.grid.GridPanel({
//enableColumnMove:false,
//enableColumnResize:false,
//斑马显示效果
stripeRows:true,
//显示loding.....
loadMask:true,
autoHeight:true,
renderTo:'grid',
store:store,
cm:cm
});
});
分享到:
相关推荐
Extjs grid 中文排序问题修正,其实很简单,请自己看源代码
功能: 中文排序功能 具体: 实现按照中文信息,进行排序 用法: 将此方法,放到ext-all.js文件最后,或者放到html页面最上面,总之要在Ext初始化之后,实际代码调用之前执行。
ExtJS是一种主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。 功能丰富,无人能出其右 无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 单选行,多选行,高亮显示选中的行,推拽...
代码如下: [removed] Ext.data.Store.prototype.applySort=function(){//重载applySort if(this.sortInfo && !this.remoteSort){ var s = this.sortInfo, f=s.field;... //添加:修复汉字排序异常的Bug if(typeof
一个关于EXTJs 表格 中文排序的例子
ExtJS是一种主要用于创建前端用户界面,是一个与后台技术无关的前端ajax框架。 功能丰富,无人能出其右 无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 单选行,多选行,高亮显示选中的行,推拽改变列宽度,按列...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
3.3.4 解决中文排序 35 3.3.5 显示日期类型数据 37 3.4 在单元格里显示红色的字、图片和按钮 38 3.5 给Grid的行和列设置颜色 41 3.6 自动显示行号和复选框 42 3.6.1 自动显示行号 43 3.6.2 复选框 44 3.7 ...
单选行,多选行,高亮显示选中的行,拖拽改变列宽度,按列排序,这些基本功能ExtJS轻量级实现。 自动生成行号,支持checkbox全选,动态选择显示哪些列,支持本地以及远程分页,可以对单元格按照自己的想法进行渲染...
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计...
看看extjs那些美丽的例子。 1.1. 一切从extjs发布包开始 1.2. 看看ext-1.1.1的文档 1.3. 看看ext-2.0的文档 1.4. 为什么有的例子必须放在服务器上才能看到效果? 1.5. 为什么自己按照例子写的代码,显示出来总找不...
2.4.3. 中文排序是个大问题 2.5. 让单元格里显示红色的字,图片,按钮,你还能想到什么? 2.6. 更进一步,自动行号和多选checkbox 2.6.1. 自动行号 2.6.2. 全选checkbox的时间了,请允许我让2.0先上场。 2.7. 分页了...
它提供一个全新的前台和后台界面,后台采用ExtJS开发。该程序支持销售任意类的商品从简单的产品到数字货物和服务。TomatoCart还提供一些市场营销功能如:礼券,按购买数量打折,交叉销售,愿望清单等。TomatoCart...
-修正extjs最新版本(v3.2.2)中的一个bug,如果下拉列表中存在两个相同的Text,则SelectedValue返回值永远是第一个Text的值(feedback:ben.zhou)。 -应用补丁#6593, #6621(feedback:vbelyaev)。 +修正IE7下Grid分页...
-修正Grid的列名中不能包含中文字符的BUG(feedback:davidwen)。 -为Web.config和PageManager增加属性AjaxTimeout(单位秒,默认30秒)。 -修正了在Grid的PageIndexChange事件中不能获取SelectedRowIndexArray属性的...