Extjs学习总结之22GridPanel扩展

首先，21我没写，因为21是关于分页的，分页我们之前已经讲过了，并且在20章的行模型中也有样式，所以就没写。

 

下面我们讲的是22 表格面板的扩展，所谓扩展就是其他额外的功能，比如添加新行拉，展开了一类的。

 

gridpanel.js

Ext.onReady(function(){
	/*
	 * 行选择模型Ext.grid.RowSelectionModel与数据无关,所以我们不能试图通过Ext.grid.RowSelectionModel
	 * 去读取单元格的数据，RowSelectionModel为我们定义的主要是两个方面的东西，一是提供大量的方法
	 * 用于选择行，如选择上一行，选择下一行，选择所有行等等，而是获取行的选择信息，如某一行是否被选中，
	 * 选中的行数等等。
	 */
	
	/*
	 * 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 sm = new Ext.grid.CheckboxSelectionModel();
//	var expander = new Ext.grid.RowExpander({
//		tpl:new Ext.Template("<p><span>备注</span></p>")
//	});
	
	
	/***************加强版的列模型********************/
	var cm = new Ext.grid.ColumnModel([
//		expander,
		new Ext.grid.RowNumberer(),
		sm, //添加复选框
//		{header:"ID",width:50,dataIndex:"Hid",tooltip:"这是您的编号"},
		{header:"姓名",width:100,dataIndex:"Name",tooltip:"这是您的姓名"},
		{header:"性别",width:50,dataIndex:"Sex",align:"center",
			renderer:function(v){
				if(v == "男"){
					return "♂";
				}else{
					return "♀";
				}
			}
		},
			
		{header:"生日",width:120,format:"Y-m-d",dataIndex:"Birthday",
			renderer:Ext.util.Format.dateRenderer("Y-m-d")},
		{header:"学历",width:100,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:"Hid",type:"int",mapping:"hid"},
		{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:900,
		autoHeight:true,
		cm:cm,
		sm:sm,
		store:store,
		renderTo:"a",
//		plugins:[expander],
		antuExpandColumn:"edu", //自由伸缩 占满剩余区域
		//带摘要的GridPanel
		viewConfig:{
			forceFit:true,
			enableRowBody:true,
			showPreview:true,
			showPreview:true,
			getRowClass:function(record,rowIndex,p,store){
				if(this.showPreview){
					p.body = '<p>备注,我们一定要团结一致</p>';
					return 'x-grid3-row-expanded';
				}
				return 'x-grid3-row-collapsed';
			}
			
		},
		//分页工具栏
		bbar:
			new Ext.PagingToolbar({
			store:store,
			pageSize:6,
			displayInfo:true,
			diaplayMsg:"本页显示第{0}条到第{1}的数据，一共两条",
			emptyMsg:"没有记录",
			items:["-",{
				cls:"x-btn-text-icon",
				pressed:true,
				enableToggle:true,
				text:'隐藏备注',
				cls:'x-btn-text-icon details',
				toggleHandler:function(btn,pressed){
					var view = grid.getView();
					if(pressed){
						btn.setText("隐藏备注");
					}else{
						btn.setText("显示备注");
					}
					view.showPreview = pressed;
					view.refresh();
				}
			}]
		}),
		
		buttonAlign:"center",
		buttons:[{
			text:"第一行",
			handler:function(){
				var rsm = grid.getSelectionModel();//得到行选择模型
				rsm.selectFirstRow();
			}
		},{
			text:"上一行",
			handler:function(){
				var rsm = grid.getSelectionModel();
				if(!rsm.hasPrevious()){
					Ext.Msg.alert("警告","已经达第一行");
				}else{
					rsm.selectPrevious();
				}
			}
		},{
			text:"下一行",
			handler:function(){
				var rsm = grid.getSelectionModel();
				if(!rsm.hasNext()){
					Ext.Msg.alert("警告","已经到达最后一行");
				}else{
					rsm.selectNext();
				}
			}
		},{
			text:"最后一行",
			handler:function(){
				var rsm = grid.getSelectionModel();
				rsm.selectLastRow();
			}
		},{
			text:"全选",
			handler:function(){
				var rsm = grid.getSelectionModel();
				rsm.selectAll();
			}
		},{
			text:"全不选",
			handler:function(){
				var rsm = grid.getSelectionModel();
				rsm.deselectRange(0,grid.getView().getRows().length-1);
			}
		},{
			text:"反选",
			handler:function(){
				var rsm = grid.getSelectionModel();
				//获得总行数grid.getView.getRows().length
				for(var i=grid.getView.getRows().length-1;i>=0;i--){
					if(rsm.isSelected(i)){
						rsm.deselectRow(i);
					}else{
						rsm.selectRow(i,true);
					}
				}
			}
		},{
			/*
			 * Grid视图被定义为Ext.grid.GridView类，可以根据用户提供的参数渲染表格，得到原始的行与列的信息。
			 * 
			 * Store由结构和数据构成，每一行都是一个Ext.data.Record.Record都有name标识
			 * grid.getStore()方法可以获得GridPanel的Store,getAt(i)取得第i个Record
			 * get(Memo)是获得Record的Memo的值;
			 * 
			 */
			text:"测试",
			handler:function(){
				var view = grid.getView();
				var rsm = grid.getSelectionModel();//得到行选择模型
				var r = "";
				for(var i=0;i<view.getRows().length;i++){
					if(rsm.isSelected(i)){
						r += grid.getStore().getAt(i).get("Name")+"<br>";
					}
				}
				Ext.Msg.alert("选择","您选择的数据有: <br>"+r);
			}
			
		},{
			text:"增加新人物",
			handler:function(){
				var view = grid.getView();
				//创建一个JSON对象备用：当添加新行的时候将这个人的信息添加到表格上
				var obj = {
							Name:"新人物",
							Sex:"女",
							Birthday:Date.parseDate("1990-03-10","Y-m-d"),
							Education:"本科",
							Memo:"无备注"
						};
				//将obj与Human合并
				var human = new Human(obj);
				grid.getStore().insert(0,human);//添加到行首
//				grid.getStore().add(human);//添加到行尾
				view.refresh();
			}
			
		},{
			/*
			 * 删除选择行：
			 * <1> 循环遍历所有行
			 * <2> 判断当前行是否被选中
			 * <3> 删除选中的行
			 */
			text:"删除选择行",
			handler:function(){
				var rsm = grid.getSelectionModel();
				var view = grid.getView();
				var store = grid.getStore();
				for(var i=view.getRows().length-1;i>=0;i--){
					if(rsm.isSelected(i)){
						store.remove(store.getAt(i));
					}
				}
				view.refresh();
			}
		},{
			//删除所有行
			text:"删除所有行",
			handler:function(){
				var store = grid.getStore();
				var view = grid.getView();
				store.removeAll();
				view.refresh();
			}
		}]
	});
	
	/**
	 * 小结：
	 * 至此，我们已经学习了三个非常重要的类，Ext.grid.ColumnModel,
	 * Ext.grid.RowSelectionModel,Ext.grid.GridView,这三个类分工明确，
	 * 职责清晰，在我们设计的时候是很好的借鉴和典范。
	 * 
	 * Ext.grid.ColumnModel定义表头，包含了列的所有信息，并提供丰富的高级功能，
	 * ，如排序菜单列是否被隐藏等，默认情况下， 排序被禁用，需要将sort设置为true。
	 * 
	 * Ext.grid.RowSelectionModel负责行的选择通过他我们可以实现任何的选择操作。
	 * 
	 * Ext.grid.GridView完成表格的渲染，通过他我们可以获取表格行列的原始数据。
	 * 
	 * 另外，Ext.data.Store也功不可没，数据操作最终还是通过他来实现，该类负责更新
	 * 数据，GridView负责显示数据，RowSelectionModel负责选择数据。
	 * 
	 */
});

 

效果图：

 

注： 可能效果图和代码有些不一样，因为后面有过扩张的功能我没做出来，只完成了备注。正在修改中。。。呵呵