登 录
本示例主要使用到了静态数据分页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 /> });
抱歉!评论已关闭.
