ExtJS中grid按照中文拼音首字母排序、改变行背景、列背景、静态数据分页不再困难
最后更新于：2022-04-01 12:01:01
本示例主要使用到了静态数据分页Ext.data.PagingMemoryProxy组件、Ext.PagingToolbar分页条、viewConfig的getRowClass方法、列column的renderer的方法使用、重写Ext.data.Store对中文排序的支持、以及Ext.Template结合grid的使用方法。
~~~
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>可按中文排序的Grid/改变行背景/单元格背景/字体颜色/静态数据分页</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="content-Type" content="text/html; charset=utf-8">
<meta http-equiv="author" content="hoojo">
<meta http-equiv="blog" content="http://blog.csdn.net/IBM_hoojo">
<link rel="stylesheet" type="text/css" href="ext2/resources/css/ext-all.css">
<style type="text/css">
.rowOdd {
background-color: #EFF7FF;
color: white;
}
.rowEven {
background-color: #CAE3FF;
color: white;
}
.cellBG {
background-color: #FFDD99;
font-weight: bold;
}
</style>
<script type="text/javascript" src="ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext2/ext-all.js"></script>
<script type="text/javascript" src="ext2/build/locale/ext-lang-zh_CN-min.js"></script>
<script type="text/javascript" src="jslib/PagingMemoryProxy.js"></script>
<!-- PagingMemoryProxy.js在ext-2.2/examples/locale可以找到 -->
<script type="text/javascript" src="jslib/Ext.hoo.grid.SortChineseGridPanel.js"></script>
</head>
<body>
<div id="showGrid"></div>
<div id="showPanel"></div>
</body>
</html>
~~~
看图：改变行列背景、字体颜色、name按照中文拼音首字母排序：依次是a、b、c、c、e；及数据分页
Ext.hoo.grid.SortChineseGridPanel.js
~~~
/**
* 本示例主要使用到了静态数据分页Ext.data.PagingMemoryProxy组件、Ext.PagingToolbar分页条、
* viewConfig的getRowClass方法、列column的renderer的方法使用、重写Ext.data.Store对中文排序的支持、
* 以及Ext.Template结合grid的使用方法。
* author: hoojo
* createDate: 2010-8-14
**/
Ext.ns("Ext.hoo.grid");
Ext.hoo.grid.SortChineseGridPanel = Ext.extend(Ext.grid.GridPanel, {
constructor: function () {
this.data = [
[1, "奥巴马", 48],
[3, "布朗", 20],
[5, "次郎", 22],
[2, "多尔衮", 159],
[4, "厄洛斯", 34],
[6, "弗莱德", 25],
[8, "哥萨克", 24],
[23, "汉德森", 48],
[13, "杰克", 20],
[15, "卡尔", 22],
[12, "露丝", 159],
[14, "玛丽卡", 34],
[16, "妮娜", 25],
[18, "欧德桑", 24]
];
this.store = new Ext.data.Store({
proxy: new Ext.data.PagingMemoryProxy(this.data) ,
reader: new Ext.data.ArrayReader({}, [
{name: "id", type: "int", mapping: 0},
"name", "age"
]),
sortInfo: {field: "name", direction: "asc"}
});
Ext.hoo.grid.SortChineseGridPanel.superclass.constructor.call(this, {
renderTo: "showGrid",
title: "可按中文排序的Grid/改变行背景/单元格背景/字体颜色",
height: 300,
width: 600,
frame: true,
autoScroll: true,
autoExpandColumn: "age",
columns: [{
header: "编号",
dataIndex: "id",
sortable: true
}, {
header: "名称",
dataIndex: "name",
sortable: true
}, {
header: "年龄",
dataIndex: "age",
sortable: true,
renderer: this.onRenderAgeCol
}],
sm: new Ext.grid.RowSelectionModel({
singleSelect: true,
listeners: {
rowselect: {
fn: this.onRowSelected,
scope: this
}
}
}),
bbar: new Ext.PagingToolbar({
store: this.store,
pageSize: 5,
displayInfo: true,
displayMsg: "显示{0}条到{1}条记录，总共{2}条记录",
emptyMsg: "没有数据记录"
}),
viewConfig: {
forceFit: true,
autoFill: true,
getRowClass: function(record, index, rowParams, store) {
if (index % 2 == 0) {
return 'rowEven';
} else {
return 'rowOdd';
}
}
}
});
this.store.load({params: {start: 0, limit: 5}});
},
/**
* 列渲染器方法，在grid渲染的时候执行
* @param value 当前列的值
* @param metaData 当前列的css样式
* @param record 当前列的record记录
* @param rowIndex 行索引
* @param colIndex 当前列索引
* @param store 当前grid的store
*/
onRenderAgeCol: function (value, metaData, record, rowIndex, colIndex, store) {
if (rowIndex == 2) {//改变第四行的当前单元格背景颜色
metaData.attr = 'style="color: white; background-color: #A9C9E2;"';//添加style样式
} else if (value > 40) {
metaData.attr = 'style="color: red;"';
metaData.css = "cellBG";//添加class样式
}
if (rowIndex > 2) {
return "<a href='http://blog.csdn.net/IMB_hoojo' target='_blank'>【" + value + "】-【" + record.get("name") + "】-【" + store.getAt(0).data.name + "】</a>";
} else if (rowIndex == 1) {
metaData.cellAttr = "style='background-color: white; color: green;'";//不兼容firefox
return value;
} else {
return value;
}
},
onRowSelected: function (sm, rowIndex, record) {
var data = Ext.applyIf(record.data, {cls: this.getStyle()})
this.getViewTpl().overwrite(this.getViewPanel().body, data);
},
getStyle: function () {
return this.getViewPanel().getStyle();
},
setViewPanel: function (p) {
this.viewPanel = p || {};
},
getViewPanel: function () {
return this.viewPanel || {};
},
getViewTpl: function () {
return this.getViewPanel().getViewTpl();
}
});
/**
* 重写（覆盖）applySort方法
* 按照拼音字母进行排序
*/
Ext.override(Ext.data.Store, {
applySort: function () {
if (this.sortInfo && !this.remoteSort) {
var s = this.sortInfo;
var f = s.field;
var st = this.fields.get(f).sortType;
var fn = function (r1, r2) {
var v1 = st(r1.data[f]);
var 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.data.Store.prototype.applySort = function () {
};*/
Ext.ns("Ext.hoo.panel");
Ext.hoo.panel.ViewPanel = Ext.extend(Ext.Panel, {
constructor: function () {
this.viewTplMarkup = [
"编号:<span style='{cls}'>{id}</span><br/>",
"名称:<span style='{cls}'>{name}</span><br/>",
"年龄:<span style='{cls}'>{age}</span><br/>"
];
this.viewTpl = new Ext.Template(this.viewTplMarkup);
Ext.hoo.panel.ViewPanel.superclass.constructor.call(this, {
//title: "详细信息",
renderTo: "showPanel",
height: 100,
width: 600
});
},
getViewTpl: function () {
return this.viewTpl;
},
setStyle: function (cls) {
this.sty = cls || "color: red;";
},
getStyle: function () {
return this.sty || {};
}
});
Ext.onReady(function () {
Ext.BLANK_IMAGE_URL = "ext2/resources/images/default/s.gif";
var grid = new Ext.hoo.grid.SortChineseGridPanel();
var vp = new Ext.hoo.panel.ViewPanel();
vp.setStyle("color: red;")
grid.setViewPanel(vp);
});
~~~