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:[
								{
									text:"增加电影",
									icon:"image/table_add.png",
									cls:"x-btn-txt-icon",
									handler:function(){
										//创建值
										editGrid.getStore().insert(0,movieRec);
										//初始编缉
										editGrid.startEditing(0,0);
									}

								},{
									text:"增加电影(后面)",									
									icon:"image/table_add.png",
									cls:"x-btn-txt-icon",
									handler:function(){
										editGrid.getStore().insert(editGrid.getStore().getCount(),movieRec);
										editGrid.startEditing(editGrid.getStore().getCount() -1,0);
									}
								},{
									text:"删除电影",
									icon:"table_delete.png",
									cls:"x-btn-txt-icon",
									handler:function(){
										var sm = editGrid.getSelectionModel();
										var sl = sm.getSelected();
										if(sm.hasSelection()){
											Ext.Msg.show({
															title:"do you want to delete",
															buttons:Ext.Msg.YESNOCANCEL,
															msg:"你要删除" + sl.get("title") + "数据吗?",
															fn:function(btn){
																if(btn == "yes"){
																	editGrid.getStore().remove(sl);
																}
															}
														});
										}
									}
								}
							],
						bbar:[{
									text:"增加电影(Server)",
									handler:function(){
										testGrid.insertFromServer(editGrid);
									}
								},{
									text:"删除电影(Server)",
									handler:function(){
										var sm = editGrid.getSelectionModel();
										var sel = sm.getSelected();
										if(sm.hasSelection()){
											Ext.Msg.show({
															title:"do you want to delete",
															buttons:Ext.Msg.YESNOCANCEL,
															msg:"你要删除" + sel.get("title") + "数据吗?",
															fn:function(btn){
																if(btn == "yes"){
																	testGrid.deleteFromServer(editGrid,sel);
																}
															}
														});
										}
									}
								}

						]

					});
});


var movieRecord = new Ext.data.Record.create([{
											name:"image",
											type:"string"
										},{
											name:"id",
											type:"string"
										},{
											name:"title",
											type:"string"
										},{
											name:"director",
											type:"string"
										},{
											name:"name",
											type:"string"
										},{
											name:"genre",
											type:"int"
										},{
											name:"tagline",
											type:"string"
										},{
											name:"price",
											type:"int"
										},{
											name:"available",
											type:"int"
										} 
									 ]);
//定义类型
var movieRec = new movieRecord({
					title:"test",
					director:"12",
					genre:"1"
				});
var testGrid = function(){
	var _conn = new Ext.data.Connection();
	var _url = "../saleInfo.do?method=operateMovieInfo";
	return {
		updateFromServer:function(e){
			_conn.request({
							url: _url,
							params:{
								action:"update",
								id:e.record.id,
								field:e.field,
								value:e.value
							},
							success:function(){
								e.record.commit();
							},
							failure:function(){
								e.record.reject();
							}
						});
		},
		deleteFromServer:function(grid,sel){
			_conn.request({
							url:_url,
							params:{
								action:"delete",
								id:sel.get("id")
							},
							success:function(){
								grid.getStore().remove(sel)
							},
							failure:function(resp,opt){
								Ext.Msg.alert("更新提示","更新数据" + e.record.id + "失败!");
							}
						});
		},
		insertFromServer:function(grid){
			_conn.request({
							url:_url,
							params:{
								action:"insert",
								title:"test"
							},
							success:function(){
								grid.getStore().insert(0,movieRec);
								grid.startEditing(0,0);
							},
							failure:function(){
								Ext.Msg.alert("保存提示","保存数据失败!")
							}
						});
		}
	}
}();