日期:2014-05-16  浏览次数:20412 次

LearningExtJS_new 之 GRID的应用学习(三)
Ext.onReady(function(){
	//1.定义数据仓库 store,通常store 可以有三种类型
	//simpleStore,xmlStore,jsonStore
	//2.配置GridPanel 时,要配置一些基本的设置:
//	1>renderTo 展现的地方,可以是dom或ID元素
//	2>frame 为true 时设置边框
//	3>width,height 宽,高
//	4>store 加载数据
//	5>columns 展现的列信息,columns 中renderer:fn.可以用Ext.util.format 下信息:dateRenderer,uppercase,lowercase,capitalize等 
	//renderer 参数:值 ,cell信息,store的记录信息
//	6>stripeRows 交替颜色
//	3.排序的方法
//	1>直接在配置中设置:{header: 'Tagline', dataIndex: 'tagline', sortable: true}
//	2>设置完成后,修改:	var firstCm = firstGrid.getColumnModel();firstCm.getColumnById(0).sortable = true;
//	4.设置可见的方法
//	1>直接在配置中设置:{header: "Tagline", dataIndex: 'tagline', hidden: true}
//	2>设置完成后,修改 var firstCm = firstGrid.getColumnModel();firstCm.setHidden(firstCm.getIndexById("title"),true);
//	5.设置是否移动
//	1>移动时gridpanel配置设置是否移动:enableColumnMove:true//是否移动
//	2>移动时,设置移动函数 firstCm.on("columnMoved",function(cm,oindx,nindx)
//	6.从store 中读取数据
//	1>从xml文件读取据,首先有xml文件,如xml/movie.xml文件.定义store,分别配置url和reader为xmlReader,设置好{record},配置完store后设置load.
//	2>json文件读取,首先有json文件,如json/movie.json文件.定义jsonStore,分别配置url和fields,root,配置完store后设置load.
//	3>从服务器端读取,服务端返回json格式,客户端用jsonStore,读取,解析方式同json文件读取.
//	7.表格数据的操作之选择操作
//	1>定义数据模式,选择模式 getSelectionModel,取 selectionModel的几个方法 hasSelection(),getSelected(),
//	2>sel = sm.getSelected()选择到的据行 进行set数据操作,操作时用sel.data.**来展示数据.
//	8.表格数据的操作之列操作
//	1>义数据列模式, getColumonModel(),取其中的列 getColumnById("ID");
//	2>对列数据进行操作cm.setHidde(column,true Or false) cm.isHidden();
//	9.数据分页
//	1>要定义一个jsonStore 用来保存数据,store 有root,和totlaProperty用来告知从哪取数据和总的数据量
//	2>在gridPanel中定义一个PagingToolbar,用来分页展示,其中当前面和总页数就是参数设置的start和totalProperty的设置值
//  3>设置grid信息和后台数据对这些组件进行组装
//  10.数据分组
//  1>首先定义数据分组GroupingStore仓库,主要配置排序信息sortInfo,分组域groupField,还有reader
//  2>后续定义grid,定义时加上 groupView,以展示分组信息.否则没有分组效果.
	//定义一个普通数组
	var store =  new Ext.data.Store({
					//定义数据 data
					data:[[
								"de.png",
								1,
								"Office Space",
								"Mike Judge",
								"1999-02-19",
								1,
								"Work Sucks",
								"19.95",
								1
							],[
								"us.png",
								3,
								"Super Troopers",
								"Jay Chandrasekhar",
								"2002-02-15",
								2,
								"Altered State Police",
								"14.95",
								2
							]
					],
					reader:new Ext.data.ArrayReader({
														id:"id"
														
													},[
														'image',
														'id',
														'title',
														'director',
														{name: 'released', type: 'date', dateFormat: 'Y-m-d'},
														'genre',
														'tagline',
														'price',
														'available'
													]
						)
				});
		
		//设置类型
		var genreStore = new Ext.data.SimpleStore({
							data:[
									[1,"喜剧"],
									[2,"悲剧"]
								],
							fields:["id","name"]
						});
						
		//定义xml仓库
		var movieXmlStore = new Ext.data.Store({
							url:"./xml/movie.xml",
							reader:new Ext.data.XmlReader({
																	record:"row",
																	id:"xmlMovie"
															},[ 
																	"id",
																	"title",
																	"director",
																	{name:"released",type:'date',dateFormat:"Y-m-d"},
																	"genre",
																	"tagline",
																	"coverthumb",
																	{name:"price",type:'float'},
																	{name:"active",type:'bool'}
															]
														)
						});
		//定义json 仓库
		var movieJsonStore = new Ext.data.JsonStore({
							url:"./json/movie.json",
							root : "rows",
							fields: [
										"id",
										"title",
										"director",
										{name:"released",type:'date',dateFormat:"Y-m-d"},
										"genre",
										"tagline",
										"coverthumb",
										{name:"price",type:'float'},
										{name:"active",type:'bool'}
								] 
						});
		//定义远程服务端仓库,用来分页展示
		var removeStore = new Ext.data.JsonStore({
								url:"../saleInfo.do?method=get