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

LearningExtJS_new 之 EDIT GRID的应用学习(四)
Ext.onReady(function(){
	//使用EditGrid
//	1.开始使用使用editGrid
//	1>把原来的Ext.grid.gridPanel修改成Ext.grid.editorGridPanel
//	2>在grid中增加clicksToEdit参数,使其可编缉,不指定则默认为2.双击两次
//	3>定义form域中的组件进行编缉,如TextField
//	4>在grid的columns中定义上步定义好的form域的组件.
//	2.编缉更多的类型
//	1>时间 DateField
//	2>下拉框 ComboBox
//	3.脏数据的处理方法
//	1>使用afterEdit方法中参数 e.对于e的参数可以是field,value,grid,row,orignalValue,record,column
//	2>使用e.record.commit()和e.record.reject()分别用来提交和拒绝数据,提交后把数据写入缓存中.
//	4.缓存中数据的增加,修除方法.
//	1>增加数据,定义数据类型 record.create定义数据类型,grid.getStore().insert增加数据,grid.startEidt开如编缉处
//	2>删除数据 grid.getStore().remove(sl)删除选中数据
//	5.服务端操作数据
//	1>对数据的增加,删除,修改操作,都可以用new Ext.data.Connection(); 类来与后台数据交互
//	2>与前台操作数据相同,不同的只是在操作时,把后台要操作的数据传到后台数据操作.
//	3>返回success,与failture对成功与失败返回操作

	//定义数据库
	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'
												]
					)
			});
	//定义form中组件,设置导演,标题,说明
	var txtDirector = new Ext.form.TextField();
	var txtTitle = new Ext.form.TextField();
	var txtTagLine = new Ext.form.TextField({maxLength:45});
	//发布日期
	var dtReleased = new Ext.form.DateField({format:"m/d/y"});
	//下拉框类型
	var localData = [["1","喜剧"],["2","歌剧"],["3","动作片"]];
	var localStore = new Ext.data.SimpleStore({
						data:localData,
						fields:["id","type"]
					});
	//类型
	var cbGenre = new Ext.form.ComboBox({
					store:localStore,
					typeAhead:true,
					mode:"local",
					displayField:'type',
					valueField:"id",
					triggerAction:"all"
				});
				
	//定义数据类型
//													'image',
//													'id',
//													'title',
//													'director',
//													{name: 'released', type: 'date', dateFormat: 'Y-m-d'},
//													'genre',
//													'tagline',
//													'price',
//													'available'

	//定义编缉器
	var editGrid = new Ext.grid.EditorGridPanel({
						title:"电影编缉",
						frame:true,
						width:600,
						height:400,
						renderTo:document.body,
						clickstoEdit:2,
						store:store,
						sm:new Ext.grid.RowSelectionModel({
								singleSelect:true
							}),
						columns:[{
										header:"title",
										dataIndex:"title",
										editor:txtTitle
									},{
										header:"director",
										dataIndex:"director",
										editor:txtDirector
									},{
										header:"released",
										dataIndex:"released",
										renderer:Ext.util.Format.dateRenderer("m/d/y"),
										editor:dtReleased
									},{
										header:"genre",
										dataIndex:"genre",
										renderer:function(val){
													return localStore.queryBy(function(rec){
																					return rec.get("id") == val
																				},this).itemAt(0).get("type");
												},
										editor:cbGenre
									},{
										header:"tagline",
										dataIndex:"tagline",
										editor:txtTagLine
									}
								],
						listeners:{
									afterEdit:function(e){
										//e.field && e.value 取当前的值
										if(e.field == "director" && e.value == "refurbish"){
											Ext.Msg.alert("refurbish is fobidden","被禁止");
											e.record.reject();
										}else{
											//e.record.commit();
										}
										
										//edit grid on server
										testGrid.updateFromServer(e);
									}
								},
						tbar:[