Extjs学习总结之19表格组件gridpanel

Ext.onReady(function(){
	/*
	 * Ext.grid.GridPanel其实就是一个panel，Ext.panel是它的父类，
	 * 在面板上放置表格数据就成了GridPanel.
	 * 
	 * 从外观上看，表格分为：表头，数据行，分页栏。分页这里不去考虑。主要看表头和数据行。
	 * 表头为表格列提供一系列的信息，包含了列的说明，列的宽度，是否可以改变大小值，
	 * 是否可以排序，是否出现菜单等数据。表头由列模型Ext.grid.ColumnModel定义，
	 * 是Ext.util.Observable的子类，所以列模型也会出发相应的事件，列模型通常会
	 * 包含若干个列的信息，每一列的信息保存在JSON结构中，一个列的配置选项有很多。
	 */
	
	/*加强版的列模型*/
	 
	 
	//定义列模型 dataIndex表示记录结构中name的属性值
//	var cm = new Ext.grid.ColumnModel([
//		{header:"姓名",width:80,dataIndex:"Name",tooltip:"这是您的姓名"},
//		{header:"性别",width:40,dataIndex:"Sex",align:"center"},
//		{header:"生日",width:150,format:"Y-m-d",dataIndex:"Birthday"},
//		{header:"学历",width:80,dataIndex:"Education",align:"center"},
//		{id:"memo",header:"备注",dataIndex:"Memo"}
//	]);
//	
	/***************加强版的列模型********************/
	var cm = new Ext.grid.ColumnModel([
		new Ext.grid.RowNumberer(),
		{header:"姓名",width:80,dataIndex:"Name",tooltip:"这是您的姓名"},
		{header:"性别",width:40,dataIndex:"Sex",align:"center",
			renderer:function(v){
				if(v == "男"){
					return "♂";
				}else{
					return "♀";
				}
			}
		},
			
		{header:"生日",width:100,format:"Y-m-d",dataIndex:"Birthday",
			renderer:Ext.util.Format.dateRenderer("Y-m-d")},
		{header:"学历",width:80,dataIndex:"Education",align:"center"},
		{id:"memo",header:"备注",dataIndex:"Memo"},
		{header:"操作",width:150,dataIndex:'',menuDisabled:true,
			renderer:function(v){
				return "<span style='margin-right:10px'><a href='#'>修改</a></span><span><a href='#'>删除</a></span>"
			}
		}
	]);
//	new Ext.grid.RowNumberer.prototype={
//		header:"",
//		width:23,
//		sortable:false,
//		fixed:true,
//		menuDisabled:true,
//		dataIndex:'',
//		id:'numberer',
//		rowspan:undefined,
//		renderer:function(v,p,record,rowIndex){
//			if(this.rowspan){
//				p.cellAttr = 'rowspan ="'+his.rowspan+"" ;
//			}
//			return rowIndex+1;
//		}
//	};
	/**********************************************/
	
	
	
	
	
	//创建DataProxy,DataReader和Store对 store对象和GridPanel绑定 GrilPanel就能显示数据
	var data = [
		{name:"吕鹏",sex:"男",birthday:Date.parseDate("1990-03-10","Y-m-d"),edu:"本科",memo:"无备注"},
		{name:"代红",sex:"女",birthday:Date.parseDate("1990-03-10","Y-m-d"),edu:"专科",memo:"无备注"},
		{name:"涛涛",sex:"男",birthday:Date.parseDate("1990-03-10","Y-m-d"),edu:"专科",memo:"无备注"},
		{name:"振振",sex:"女",birthday:Date.parseDate("1990-03-10","Y-m-d"),edu:"专科",memo:"无备注"}
	];
	//Proxy
	var proxy = new Ext.data.MemoryProxy(data);
	
	//Record 定义记录的结果
	var Human = Ext.data.Record.create([
		{name:"Name",type:"string",mapping:"name"},
		{name:"Sex",type:"string",mapping:"sex"},
		{name:"Birthday",type:"string",mapping:"birthday"},
		{name:"Education",type:"string",mapping:"edu"},
		{name:"Memo",type:"string",mapping:"memo"}
	]);
	
	//Reader
	var reader = new Ext.data.JsonReader({},Human);
	//Store  列模型中的dataIndex必须和Human结构中的name属性保持一致
	var store = new Ext.data.Store({
		proxy:proxy,
		reader:reader
	});
	store.load();	
	
	
	//现在，列模型和数据都准备好了，将这些数据作为GridPanel的选项配置传递到
	//GridPanel的构造方法中，并适当的设置外观参数，效果就出来了。、
	var grid = new Ext.grid.GridPanel({
		title:"中国四有青年模范代表",
		width:600,
		autoHeight:true,
		cm:cm,
		store:store,
		renderTo:"a",
		antuExpandColumn:"memo" //自由伸缩 占满剩余区域
	});
	
	//
	
});