ExtJS中grid按照中文拼音首字母排序、改變行背景、列背景、靜態數據分頁不再困難 · ExtJS 專欄

本示例主要使用到了靜態數據分頁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> ~~~ ![](https://box.kancloud.cn/2016-04-01_56fe121baec56.gif) 看圖：改變行列背景、字體顏色、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); }); ~~~