~~~
/***
* 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>
~~~
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();
});
~~~
- 前言
- ExtJS 中用js 操作cookie的方法
- eclipse MyEclipse中安裝 ext插件 spket提示
- eclipse MyEclipse中安裝 spket插件 js文件內容字體變小解決方案
- ExtJS中，在FireFox瀏覽器中字體很小，解決方法
- ExtJS中grid按照中文拼音首字母排序、改變行背景、列背景、靜態數據分頁不再困難
- ExtJS中grid按照使用Expand插件、分組顯示、中文拼音首字母排序、改變行背景、列背景、靜態數據分頁綜合案例
- ExtJS EditorGridPanel 示例之xml格式Store前后臺增刪改查
- ExtJS EditorGridPanel 示例之Array格式（自定義Array解析器）Store前后臺增刪改查
- ExtJS EditorGridPanel 示例之Array格式Store前后臺增刪改查（不支持分頁）
- ExtJS EditorGridPanel 示例之JSON格式Store前后臺增刪改查
- Ext 中，為Ext.form.HtmlEditor添加鍵盤事件
- ExtJS 文件瀏覽器，可以選擇文件和文件夾
- Struts2、Spring3、MyBatis3整合ExtJS，完成ColumnTree 【一】
- Struts2、Spring3、MyBatis3整合ExtJS，完成ColumnTree 【二】
- Struts2、Spring3、MyBatis3整合ExtJS，完成CheckNodeColumnTree
- ExtJS Form擴展組件[ColorFiled, DateTimeFiled, IconCombo, MultiComboBox, DynamicTreeCombox]
- Ext [DDTabPanel、FoodImageField、ImageChooser]擴展組件