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=getMovieInfo",
								root:"rows",
								totalProperty: 'results',
								fields:[
										"id",
										"title",
										"director",
										{name:"released",type:'date',dateFormat:"Y-m-d"},
										"genre",
										"tagline",
										"coverthumb",
										{name:"price",type:'float'},
										{name:"active",type:'bool'}
								]
							});
		var grpStore = new Ext.data.GroupingStore({
								url:"./json/movie.json",
								sortInfo:{
									field:"director",
									direction:"DESC"
								},
								groupField:"director",
								reader: new Ext.data.JsonReader({
											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'}
												] 
										}) 
							});
		//在grid 控件上显示store 数据信息
		var firstGrid = new Ext.grid.GridPanel({
							title:"电影信息列表",
							width:700,
							height:300,
							frame:true,
							stripeRows:true,
							autoExpandColumn:5,
							renderTo:document.body,
//							store:store,
//							store:movieXmlStore,
//							store:removeStore,
							store:grpStore,
							columns:[{
											header:"图片",dataIndex:"image",renderer:function(val){
																						return "<img src='image/" + val + "'>";
																					}
										},{
											id:"title",header:"标题",dataIndex:"title",renderer:function(val,x,curStore){
																						return "<b>" + val + "</b><br/>" + curStore.get("tagline");
																					}
										},{
											header:"导演",dataIndex:"director"
										},{
											header:"发布日期",dataIndex:"released",renderer:Ext.util.Format.dateRenderer("m/d/y")
										},{
											header:"喜剧类型",dataIndex:"genre"
//											,renderer:function(val){
//																					return genreStore.queryBy(function(rec){
//																											return rec.get("id") == val;
//																										},this).itemAt(0).get("name");
//																				}
										},{
											header:"说明",dataIndex:"tagline"
										},{
											id:"price",header:"价格",dataIndex:"price"
										}
									],
							enableColumnMove:true,//是否移动
							sm:new Ext.grid.RowSelectionModel({
								singleSelect:true,
								listeners:{
									rowSelect:{
										fn:function(sm,indx,record){
											Ext.MessageBox.alert("title",record.get("title"));	
										}									
									}
								}
							}),
							tbar:[{
										text:"Change Title",
										handler:function(){
											var sm = firstGrid.getSelectionModel();
											if(sm.hasSelection()){
												var sel = sm.getSelected();
												Ext.Msg.show({
													title:"Change title",
													prompt:true,
													buttons:Ext.MessageBox.OKCANCEL,
													value:sel.data.title,
													fn:function(btn,txt){
														if(btn == "ok"){
															console.debug(txt);
															sel.set("title",txt);
														}
													}
												})
											}
										}
									},{
										text:"Hide price",
										handler:function(btn){
											var cm = firstGrid.getColumnModel();
											var cmPrice = cm.getIndexById("price");
											if(cm.isHidden(cmPrice)){
												cm.setHidden(cmPrice,false);
												btn.setText("Hide price");
											}else{
												cm.setHidden(cmPrice,true);
												btn.setText("Show price");												
											}
											btn.render();
										}
									}		
							],
//							bbar:new Ext.PagingToolbar({
//									pageSize:1,
//									store:removeStore,
//									items:[
//											"-",
//											{
//												  pressed: true,
//												  text:"test",
//												  enableToggle:true,
//												  toggleHandler:function(){
//												  	Ext.Msg.show({
//												  		title:"dss"
//												  	});
//												  }
//											}
//									]
//								})
							view:new Ext.grid.GroupingView()
						});
	//设置,排序和隐藏
	var firstCm = firstGrid.getColumnModel();
	firstCm.getColumnById(0).sortable = true;
//	firstCm.setHidden(firstCm.getIndexById("title"),true);
	//移动时设置
	firstCm.on("columnMoved",function(cm,oindx,nindx){
								//根据位置显示向左移或向右移
								var colName = cm.getColumnHeader(oindx);
								var msg = "";
								if(oindx > nindx){
									msg = colName +  " move to left.";
								}else{
									msg = colName +  " move to right.";
								}
								Ext.Msg.alert("colomn " + colName,msg);
							});
//	movieXmlStore.load();
//	movieJsonStore.load();
//	removeStore.load({params:{start:0,limit:1}});
	grpStore.load();
})