ExtJS学习笔记之五------- GridPanel_ext modern gridpanel-CSDN博客

本文链接：https://blog.csdn.net/brushli/article/details/19125123

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>

程序运行结果