[置顶] ExtJS中grid按照使用Expand插件、分组显示、中文拼音首字母排序、改变行背景、列背景、静态数据分页综合案例
/*** * grid基础综合案例 * 添加分页Ext.data.PagingMemoryProxy、重写Ext.data.Store支持中文汉字拼音字母首字母排序、 * Ext.data.GroupingStore分组（GroupingStore继承Store的）、 * 改变列背景色、行背景色、字体颜色getRowClass方法和renderer函数onRenderAgeCol的使用技巧 * 添加分组、行收缩展开插件Ext.grid.RowExpander使用及重写Ext.grid.RowExpander组件的 * 添加Ext.grid.GroupingView的groupTextTpl方法的使用 * author: hoojo * create by: 2010-8-14 */ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>可分组显示、expand插件、中文排序的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/RowExpander.js"></script> <!-- RowExpander.jsext-2.2/examples/grid下可以找到--> <script type="text/javascript" src="jslib/Ext.hoo.grid.ConformityGrid.js"></script> </head> <body> </body> </html>
![[置顶] ExtJS中grid按照使用Expand插件、分组显示、中文拼音首字母排序、改变行背景、列背景、静态数据分页综合案例_第1张图片](http://img.e-com-net.com/image/info5/2fa1df9486a5427aa0d5fae8255b9e0d.jpg)
look：按照国家分组的，其中还按照中文排序及Expand插件、分组修改单元格、行背景色、字体颜色
Ext.hoo.grid.ConformityGrid.js
/*** * grid基础综合案例 * 添加分页Ext.data.PagingMemoryProxy、重写Ext.data.Store支持中文汉字拼音字母首字母排序、 * Ext.data.GroupingStore分组（GroupingStore继承Store的）、 * 改变列背景色、行背景色、字体颜色getRowClass方法和renderer函数onRenderAgeCol的使用技巧 * 添加分组、行收缩展开插件Ext.grid.RowExpander使用及重写Ext.grid.RowExpander组件的 * 添加Ext.grid.GroupingView的groupTextTpl方法的使用 * author: hoojo * create by: 2010-8-14 */ Ext.ns("Ext.hoo.grid"); Ext.hoo.grid.ConformityGrid = Ext.extend(Ext.grid.GridPanel, { //expander: null, constructor: function () { this.data = [ [1, "奥巴马", 48, "美国", "好像是美国总统"], [3, "布朗", 20, "美国", "很常见的名字"], [5, "次郎", 22, "日本", "据说是武大郎赐给的名称"], [2, "多尔衮", 159, "中国", "差点历史就被改写"], [4, "厄洛斯", 34, "英国", "不知哪里来的"], [6, "弗莱德", 25, "美国", "和弗兰德很像"], [8, "哥萨克", 24, "英国", "是萨克斯的弟弟么"], [23, "汉德森", 48, "美国", "好像是部电影的主角"], [13, "杰克", 20, "美国", "电影中常出现的配角名称"], [15, "卡尔", 22, "美国", "是小时候看动画片的那个瘦猫，胖子是BC"], [12, "露丝", 159, "英国", "很常见的名称"], [14, "玛丽卡", 34, "美国", "这个名称好像不错哦"], [16, "妮娜", 25, "美国", "在中国有叫‘妮’、‘娜’的，‘妮娜’不多见"], [18, "欧德桑", 24, "英国", "Good Success!"] ], this.store = new Ext.data.GroupingStore({ proxy: new Ext.data.PagingMemoryProxy(this.data),//后台分页只须将proxy改为url: "your url", reader: new Ext.data.ArrayReader({}, [ {name: "id", type: "int", mapping: 0}, "name", "age", "country", "origin" ]), sortInfo: {field: "name", direction: "asc"}, groupField: "country" }), this.expander = new Ext.grid.RowExpander({ tpl : new Ext.Template( '<p><b>你是:</b> {name}</p><br>', '<p><b>评价:</b> {origin}</p>' ) }), Ext.hoo.grid.ConformityGrid.superclass.constructor.call(this, { renderTo: Ext.getBody(), title: "可按中文排序的Grid/改变行背景/单元格背景/字体颜色", height: 450, width: 600, frame: true, autoScroll: true, plugins: this.expander, autoExpandColumn: "age", columns: [this.expander, { header: "编号", dataIndex: "id", sortable: true }, { header: "名称", dataIndex: "name", sortable: true }, { header: "年龄", dataIndex: "age", sortable: true, renderer: this.onRenderAgeCol }, { header: "国家", dataIndex: "country", sortable: true }], sm: new Ext.grid.RowSelectionModel({singleSelect: true}), bbar: new Ext.PagingToolbar({ store: this.store, pageSize: 8, displayInfo: true, displayMsg: "显示{0}条到{1}条记录，总共{2}条记录", emptyMsg: "没有数据记录" }), view: new Ext.grid.GroupingView({ forceFit:true, autoFill: true, groupTextTpl: '{text}({[values.rs.length]} {[values.rs.length > 1 ? "人" : "人"]})-记录[{startRow}]'/*,startRow是行索引 //如果不用Ext.grid.RowExpande插件，这里才有效果，在用插件的情况下改变行背景颜色需要覆盖插件中的getRowClass方法 getRowClass: function(record, index, rowParams, store) { if (index % 2 == 0) { return 'rowEven'; } else { return 'rowOdd'; } }*/ }) }); this.store.load({params: {start: 0, limit: 8}}); }, /** * 列渲染器方法，在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; } } }); /** * 重写（覆盖）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.override(Ext.grid.RowExpander, { getRowClass: function(record, rowIndex, rowParams, store) { rowParams.cols = rowParams.cols-1; var content = this.bodyContent[record.id]; if(!content && !this.lazyRender){ content = this.getBodyContent(record, rowIndex); } if(content){ rowParams.body = content; } if (rowIndex % 2 == 0) { return this.state[record.id] ? 'x-grid3-row-expanded rowEven' : 'x-grid3-row-collapsed rowEven';//添加样式rowEven } else { return this.state[record.id] ? 'x-grid3-row-expanded rowOdd' : 'x-grid3-row-collapsed rowOdd';//添加样式rowOdd } } }); Ext.onReady(function () { Ext.BLANK_IMAGE_URL = "ext2/resources/images/default/s.gif"; var grid = new Ext.hoo.grid.ConformityGrid(); });