1、GridPanel的继承结构
2、GridPanel例子
下面实现一个GridPanel的例子,主要实现以下功能
(1)展示一个带有复选框的列表
(2)查看选中的行
(3)删除选中的行
(4)对某些列进行中文排序
(5)对某些列进行渲染,包括颜色、图片渲染。
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ExtJS GridPanel</title>
<link rel="stylesheet" type="text/css" href="ext-3.4.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="ext-3.4.1/ext-all-debug.js"></script>
<script type="text/javascript" src="ext-3.4.1/src/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
/**
* 对中文进行排序
*/
Ext.data.Store.prototype.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.onReady(function(){
//对性别列进行渲染
function renderSex(value){
if(value == '男'){
return "<span style='color:red'>男</span><img src='images/male.jpg'/>";
}else if(value == '女'){
return "<span style='color:green'>女</span><img src='images/female.jpg'/>";
}
}
//复选框
var sm = new Ext.grid.CheckboxSelectionModel();
//单选框
//var sm = new Ext.grid.RowSelectionModel({singleSelect: true});
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),//自动显示行号
sm,
{header: '编号', dataIndex: 'id', width: 50, sortable: true},
{header: '姓名', dataIndex: 'name', width: 100, sortable: true, align: 'center'},
{header: '性别', dataIndex: 'sex', width: 100, sortable: true, align: 'center', renderer: renderSex},
{header: '出生日期', dataIndex: 'birth', width: 200, sortable: true, type: 'date', renderer: Ext.util.Format.dateRenderer('Y年m月d日')}]);
var data = [['1001', '张三', '男', '2010-11-03 12:00:00'],
['1002', '李刚', '女', '2012-11-03 12:00:00'],
['1003', '李啊', '男', '2008-11-03 12:00:00'],
['1004', '李红', '女', '2010-01-03 12:00:00'],
['1005', '李钻', '男', '2010-08-03 12:00:00']];
var record = new Ext.data.Record.create([
{name: 'id'},
{name: 'name'},
{name: 'sex'},
{name: 'birth', type: 'date', dateFormat: 'Y-m-d H:i:s'}]);
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({idIndex: 0}, record)
});
store.load();
var gridPanel = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
title: '列表',
//layout: 'fit',
width: 500,
height: 500,
cm: cm,
sm: sm,
store: store,
viewConfig:{
forceFit: true//每列自动填满表格
},
tbar: new Ext.Toolbar({//工具栏
items:[{
text: '查看选中结果',
handler: function(){
var selections = gridPanel.getSelectionModel().getSelections();
if(selections != null && selections.length > 0){
var selectedNames = '';
for(var i = 0 ; i < selections.length; i++){
var record = selections[i];
selectedNames = selectedNames + " " + record.get("name");
}
Ext.MessageBox.alert("选中的名单", selectedNames);
}
}
},{
text: '删除',
handler: function(){
var selections = gridPanel.getSelectionModel().getSelections();
if(selections != null && selections.length > 0){
for(var i = 0 ; i < selections.length; i++){
gridPanel.getStore().remove(selections[i]);
}
Ext.MessageBox.alert("删除结果", "删除成功!");
}
}
}]
})
});
});
</script>
</head>
<body>
</body>
</html>
程序运行结果