本樣本主要使用到了待用資料分頁Ext.data.PagingMemoryProxy組件、Ext.PagingToolbar分頁條、viewConfig的getRowClass方法、列column的renderer的方法使用、重寫Ext.data.Store對中文排序的支援、以及Ext.Template結合grid的使用方法。</p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br /><html><br /><head><br /><title>可按中文排序的Grid/改變行背景/儲存格背景/字型顏色/待用資料分頁</title><br /><meta http-equiv="pragma" content="no-cache"><br /><meta http-equiv="cache-control" content="no-cache"><br /><meta http-equiv="expires" content="0"><br /><meta http-equiv="content-Type" content="text/html; charset=utf-8"><br /><meta http-equiv="author" content="hoojo"><br /><meta http-equiv="blog" content="http://blog.csdn.net/IBM_hoojo"><br /><link rel="stylesheet" type="text/css" href="ext2/resources/css/ext-all.css"><br /> <style type="text/css"><br /> .rowOdd {<br /> background-color: #EFF7FF;<br /> color: white;<br /> }</p><p> .rowEven {<br /> background-color: #CAE3FF;<br /> color: white;<br /> }</p><p> .cellBG {<br /> background-color: #FFDD99;<br /> font-weight: bold;<br /> }<br /> </style><br /> <script type="text/javascript" src="ext2/adapter/ext/ext-base.js"></script><br /> <script type="text/javascript" src="ext2/ext-all.js"></script><br /> <script type="text/javascript" src="ext2/build/locale/ext-lang-zh_CN-min.js"></script><br /> <script type="text/javascript" src="jslib/PagingMemoryProxy.js"></script><br /> <!-- PagingMemoryProxy.js在ext-2.2/examples/locale可以找到 --><br /> <script type="text/javascript" src="jslib/Ext.hoo.grid.SortChineseGridPanel.js"></script></p><p> </head></p><p> <body><br /> <div id="showGrid"></div><br /> <div id="showPanel"></div><br /> </body><br /></html><br />
看圖：改變行列背景、字型顏色、name按照中文拼音首字母排序：依次是a、b、c、c、e；及資料分頁
Ext.hoo.grid.SortChineseGridPanel.js
/**<br /> * 本樣本主要使用到了待用資料分頁Ext.data.PagingMemoryProxy組件、Ext.PagingToolbar分頁條、<br /> * viewConfig的getRowClass方法、列column的renderer的方法使用、重寫Ext.data.Store對中文排序的支援、<br /> * 以及Ext.Template結合grid的使用方法。<br /> * author: hoojo<br /> * createDate: 2010-8-14<br /> **/<br />Ext.ns("Ext.hoo.grid");<br />Ext.hoo.grid.SortChineseGridPanel = Ext.extend(Ext.grid.GridPanel, {<br /> constructor: function () {<br /> this.data = [<br /> [1, "奧巴馬", 48],<br /> [3, "布朗", 20],<br /> [5, "次郎", 22],<br /> [2, "多爾袞", 159],<br /> [4, "厄洛斯", 34],<br /> [6, "弗萊德", 25],<br /> [8, "哥薩克", 24],<br /> [23, "漢德森", 48],<br /> [13, "傑克", 20],<br /> [15, "卡爾", 22],<br /> [12, "露絲", 159],<br /> [14, "瑪麗卡", 34],<br /> [16, "妮娜", 25],<br /> [18, "歐德桑", 24]<br /> ];<br /> this.store = new Ext.data.Store({<br /> proxy: new Ext.data.PagingMemoryProxy(this.data) ,<br /> reader: new Ext.data.ArrayReader({}, [<br /> {name: "id", type: "int", mapping: 0},<br /> "name", "age"<br /> ]),<br /> sortInfo: {field: "name", direction: "asc"}<br /> });<br /> Ext.hoo.grid.SortChineseGridPanel.superclass.constructor.call(this, {<br /> renderTo: "showGrid",<br /> title: "可按中文排序的Grid/改變行背景/儲存格背景/字型顏色",<br /> height: 300,<br /> width: 600,<br /> frame: true,<br /> autoScroll: true,<br /> autoExpandColumn: "age",<br /> columns: [{<br /> header: "編號",<br /> dataIndex: "id",<br /> sortable: true<br /> }, {<br /> header: "名稱",<br /> dataIndex: "name",<br /> sortable: true<br /> }, {<br /> header: "年齡",<br /> dataIndex: "age",<br /> sortable: true,<br /> renderer: this.onRenderAgeCol<br /> }],<br /> sm: new Ext.grid.RowSelectionModel({<br /> singleSelect: true,<br /> listeners: {<br /> rowselect: {<br /> fn: this.onRowSelected,<br /> scope: this<br /> }<br /> }<br /> }),<br /> bbar: new Ext.PagingToolbar({<br /> store: this.store,<br /> pageSize: 5,<br /> displayInfo: true,<br /> displayMsg: "顯示{0}條到{1}條記錄，總共{2}條記錄",<br /> emptyMsg: "沒有資料記錄"<br /> }),<br /> viewConfig: {<br /> forceFit: true,<br /> autoFill: true,<br /> getRowClass: function(record, index, rowParams, store) {<br /> if (index % 2 == 0) {<br /> return 'rowEven';<br /> } else {<br /> return 'rowOdd';<br /> }<br /> }<br /> }<br /> });<br /> this.store.load({params: {start: 0, limit: 5}});<br /> },<br /> /**<br /> * 列渲染器方法，在grid渲染的時候執行<br /> * @param value 當前列的值<br /> * @param metaData 當前列的css樣式<br /> * @param record 當前列的record記錄<br /> * @param rowIndex 行索引<br /> * @param colIndex 當前列索引<br /> * @param store 當前grid的store<br /> */<br /> onRenderAgeCol: function (value, metaData, record, rowIndex, colIndex, store) {<br /> if (rowIndex == 2) {//改變第四行的目前的儲存格背景顏色<br /> metaData.attr = 'style="color: white; background-color: #A9C9E2;"';//添加style樣式<br /> } else if (value > 40) {<br /> metaData.attr = 'style="color: red;"';<br /> metaData.css = "cellBG";//添加class樣式<br /> }</p><p> if (rowIndex > 2) {<br /> return "<a href='http://blog.csdn.net/IMB_hoojo' target='_blank'>【" + value + "】-【" + record.get("name") + "】-【" + store.getAt(0).data.name + "】</a>";<br /> } else if (rowIndex == 1) {<br /> metaData.cellAttr = "style='background-color: white; color: green;'";//不相容firefox<br /> return value;<br /> } else {<br /> return value;<br /> }<br /> },<br /> onRowSelected: function (sm, rowIndex, record) {<br /> var data = Ext.applyIf(record.data, {cls: this.getStyle()})<br /> this.getViewTpl().overwrite(this.getViewPanel().body, data);<br /> },<br /> getStyle: function () {<br /> return this.getViewPanel().getStyle();<br /> },<br /> setViewPanel: function (p) {<br /> this.viewPanel = p || {};<br /> },<br /> getViewPanel: function () {<br /> return this.viewPanel || {};<br /> },<br /> getViewTpl: function () {<br /> return this.getViewPanel().getViewTpl();<br /> }<br />});</p><p>/**<br /> * 重寫（覆蓋）applySort方法<br /> * 按照拼音字母進行排序<br /> */<br />Ext.override(Ext.data.Store, {<br /> applySort: function () {<br /> if (this.sortInfo && !this.remoteSort) {<br /> var s = this.sortInfo;<br /> var f = s.field;<br /> var st = this.fields.get(f).sortType;<br /> var fn = function (r1, r2) {<br /> var v1 = st(r1.data[f]);<br /> var v2 = st(r2.data[f]);<br /> if (typeof(v1) == "string") {<br /> return v1.localeCompare(v2);<br /> }<br /> return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);<br /> };<br /> this.data.sort(s.direction, fn);<br /> if (this.snapshot && this.snapshot != this.data) {<br /> this.snapshot.sort(s.direction, fn);<br /> }<br /> }<br /> }<br />});<br />/*<br />也可以下面這樣寫；<br />Ext.data.Store.prototype.applySort = function () {<br />};*/<br />Ext.ns("Ext.hoo.panel");<br />Ext.hoo.panel.ViewPanel = Ext.extend(Ext.Panel, {<br /> constructor: function () {<br /> this.viewTplMarkup = [<br /> "編號:<span style='{cls}'>{id}</span><br/>",<br /> "名稱:<span style='{cls}'>{name}</span><br/>",<br /> "年齡:<span style='{cls}'>{age}</span><br/>"<br /> ];<br /> this.viewTpl = new Ext.Template(this.viewTplMarkup);<br /> Ext.hoo.panel.ViewPanel.superclass.constructor.call(this, {<br /> //title: "詳細資料",<br /> renderTo: "showPanel",<br /> height: 100,<br /> width: 600<br /> });<br /> },<br /> getViewTpl: function () {<br /> return this.viewTpl;<br /> },<br /> setStyle: function (cls) {<br /> this.sty = cls || "color: red;";<br /> },<br /> getStyle: function () {<br /> return this.sty || {};<br /> }<br />});</p><p>Ext.onReady(function () {<br /> Ext.BLANK_IMAGE_URL = "ext2/resources/images/default/s.gif";<br /> var grid = new Ext.hoo.grid.SortChineseGridPanel();<br /> var vp = new Ext.hoo.panel.ViewPanel();<br /> vp.setStyle("color: red;")<br /> grid.setViewPanel(vp);<br />});
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
