/***<br /> * grid基礎綜合案例<br /> * 添加分頁Ext.data.PagingMemoryProxy、重寫Ext.data.Store支援中文漢字拼音字母首字母排序、<br /> * Ext.data.GroupingStore分組（GroupingStore繼承Store的）、<br /> * 改變列背景色、行背景色、字型顏色getRowClass方法和renderer函數onRenderAgeCol的提示<br /> * 添加分組、行收縮展開外掛程式Ext.grid.RowExpander使用及重寫Ext.grid.RowExpander組件的<br /> * 添加Ext.grid.GroupingView的groupTextTpl方法的使用<br /> * author: hoojo<br /> * create by: 2010-8-14<br /> */</p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br /><html><br /><head><br /><title>可分組顯示、expand外掛程式、中文排序的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/RowExpander.js"></script><br /><!-- RowExpander.jsext-2.2/examples/grid下可以找到--><br /> <script type="text/javascript" src="jslib/Ext.hoo.grid.ConformityGrid.js"></script><br /> </head><br /> <body><br /> </body><br /></html><br />
look：按照國家分組的，其中還按照中文排序及Expand外掛程式、分組修改儲存格、行背景色、字型顏色
Ext.hoo.grid.ConformityGrid.js
/***<br /> * grid基礎綜合案例<br /> * 添加分頁Ext.data.PagingMemoryProxy、重寫Ext.data.Store支援中文漢字拼音字母首字母排序、<br /> * Ext.data.GroupingStore分組（GroupingStore繼承Store的）、<br /> * 改變列背景色、行背景色、字型顏色getRowClass方法和renderer函數onRenderAgeCol的提示<br /> * 添加分組、行收縮展開外掛程式Ext.grid.RowExpander使用及重寫Ext.grid.RowExpander組件的<br /> * 添加Ext.grid.GroupingView的groupTextTpl方法的使用<br /> * author: hoojo<br /> * create by: 2010-8-14<br /> */<br />Ext.ns("Ext.hoo.grid");<br />Ext.hoo.grid.ConformityGrid = Ext.extend(Ext.grid.GridPanel, {<br /> //expander: null,<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, "美國", "是小時候看動畫片的那個瘦貓，胖子是BC"],<br /> [12, "露絲", 159, "英國", "很常見的名稱"],<br /> [14, "瑪麗卡", 34, "美國", "這個名稱好像不錯哦"],<br /> [16, "妮娜", 25, "美國", "在中國有叫‘妮’、‘娜’的，‘妮娜’不多見"],<br /> [18, "歐德桑", 24, "英國", "Good Success!"]<br /> ],<br /> this.store = new Ext.data.GroupingStore({<br /> proxy: new Ext.data.PagingMemoryProxy(this.data),//後台分頁只須將proxy改為url: "your url",<br /> reader: new Ext.data.ArrayReader({}, [<br /> {name: "id", type: "int", mapping: 0},<br /> "name", "age", "country", "origin"<br /> ]),<br /> sortInfo: {field: "name", direction: "asc"},<br /> groupField: "country"<br /> }),<br /> this.expander = new Ext.grid.RowExpander({<br /> tpl : new Ext.Template(<br /> '<p><b>你是:</b> {name}</p><br>',<br /> '<p><b>評價:</b> {origin}</p>'<br /> )<br /> }),<br /> Ext.hoo.grid.ConformityGrid.superclass.constructor.call(this, {<br /> renderTo: Ext.getBody(),<br /> title: "可按中文排序的Grid/改變行背景/儲存格背景/字型顏色",<br /> height: 450,<br /> width: 600,<br /> frame: true,<br /> autoScroll: true,<br /> plugins: this.expander,<br /> autoExpandColumn: "age",<br /> columns: [this.expander, {<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 /> header: "國家",<br /> dataIndex: "country",<br /> sortable: true<br /> }],<br /> sm: new Ext.grid.RowSelectionModel({singleSelect: true}),<br /> bbar: new Ext.PagingToolbar({<br /> store: this.store,<br /> pageSize: 8,<br /> displayInfo: true,<br /> displayMsg: "顯示{0}條到{1}條記錄，總共{2}條記錄",<br /> emptyMsg: "沒有資料記錄"<br /> }),<br /> view: new Ext.grid.GroupingView({<br /> forceFit:true,<br /> autoFill: true,<br /> groupTextTpl: '{text}({[values.rs.length]} {[values.rs.length > 1 ? "人" : "人"]})-記錄[{startRow}]'/*,startRow是行索引<br /> //如果不用Ext.grid.RowExpande外掛程式，這裡才有效果，在用外掛程式的情況下改變行背景顏色需要覆蓋外掛程式中的getRowClass方法<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: 8}});<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 /> }<br /> 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 />});</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.override(Ext.grid.RowExpander, {<br /> getRowClass: function(record, rowIndex, rowParams, store) {<br /> rowParams.cols = rowParams.cols-1;<br /> var content = this.bodyContent[record.id];<br /> if(!content && !this.lazyRender){<br /> content = this.getBodyContent(record, rowIndex);<br /> }<br /> if(content){<br /> rowParams.body = content;<br /> }<br /> if (rowIndex % 2 == 0) {<br /> return this.state[record.id] ? 'x-grid3-row-expanded rowEven' : 'x-grid3-row-collapsed rowEven';//添加樣式rowEven<br /> } else {<br /> return this.state[record.id] ? 'x-grid3-row-expanded rowOdd' : 'x-grid3-row-collapsed rowOdd';//添加樣式rowOdd<br /> }<br /> }<br />});<br />Ext.onReady(function () {<br /> Ext.BLANK_IMAGE_URL = "ext2/resources/images/default/s.gif";<br /> var grid = new Ext.hoo.grid.ConformityGrid();<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
