ExtJS中grid按照中文拼音首字母排序、改变行背景、列背景、静态数据分页不再困难

来源：互联网发布：数据质量自查报告编辑：程序博客网时间：2024/04/20 10:38

本示例主要使用到了静态数据分页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>  <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); });