LearningExtJS_new 之 Form 类学习(一)

//创建一个简单的Form信息
	
	//1.创建里里面的元素使用xtype 
	//2.接着增加验证的信息 allowBlank:false,disabledDays:[1,2,3,4]
	//3.内置的vtype校验机制 Ext.form.vtypes 
	//4.增加错误提示信息 Ext.QuickTips.init();
	//5.创建自定义的vtype信息,其中mask的作用就是来限制输入的内容.
		//首先要创建时定义好四个,1>名称 + Val 用正则表达式来处理
//							   2>名称 + Mask 在输入时进行校验输入
//							   3>名称 + Text 在出错时进行信息提示
//							   4>名称 = function 用来处理校验
	//6.radioButton , checkBoxButton 和 checkBox button
	//7.combobox 下拉列表信息
		//直接从本地取数据信息 local:true
//		  1>加载时要注意设置mode:local 为ture,否则不加载数据
//		  2>要设置displayField:名称,否则没有数据展现
//		  3>triggerAction 要设置,否则只展现一次
		//从服务器上取数据信息
//		  1>要有个url返回数据,最好是json格式
//		  2>加载时要么设置autoLoad:true,要么设置store调用load方法加载,否则不加载数据
	
	//8.textArea 与HTMLEditor
	//HTMLEditor 只有在初始化为提示信息后(Ext.QuickTips.init();)才能使用,否则不会出现信息
	
	//9.form中的事件.
	//textField,combobox事件,可以用listeners:{}形式表现,不同的事件有不同的参数,可参考 API event
	
	//10.事件的提交
	//提交时调用 movieForm.getForm().submit ,对于success 和failture两参数,服务器必须有success:boolean
	//的返回.这样可以提示返回成功于否.而且对于失败信息可以进行判断分类提示信息.
	
	//11.数据的加载....
	//1.动态加载数据
	//使用 movieForm.getForm().findField("txtDirector").setValue("Jimjackson");形式加载,这种使用方法比较少
	//2.静态页面加载
	// movieForm.getForm().load({url:"",params{}});后台url返回数据,注意返回的类型success标识和data数据:如
	//{"data":{"txtDescription":"Test<\/B>","txtTitle":"Jack"},"success":true}


	//初始化提示信息
	Ext.QuickTips.init();
	
	//自定义的vtype校验 在输入导演名称时只能输入字母,且首字母要大写
	Ext.form.VTypes["nameVal"] = /^[A-Z]+[a-zA-Z]+$/;
	Ext.form.VTypes["nameMask"] = /^[a-zA-Z]$/;
	Ext.form.VTypes["nameText"] = "请输入字母,且首字母大写!";
	Ext.form.VTypes["name"] = function(value){
								return Ext.form.VTypes["nameVal"].test(value);
							};
	//定义电影类型 combobox
	//先定义一个store 从本地取数据
	var localData = [["1","喜剧"],["2","歌剧"],["3","动作片"]];
	var localStore = new Ext.data.SimpleStore({
						data:localData,
						fields:["id","type"]
					});
	//定义一个store 从服务端取,服务端用json返回
	var jsonStore =  new Ext.data.JsonStore({
						url:"../saleInfo.do?method=qryGenreInfo",
						fields:[{name:"id",type:"int"},{name:"type",type:"string"}]
					});
							
	//创建form
	var movieForm = new Ext.form.FormPanel({
						url:"../saleInfo.do?method=submitForm",
						title:"电影信息",
						renderTo:document.body,
						frame:true,
						width:400,
						items:[{
									//textfield title
									xtype:"textfield",
									id:"txtTitle",
									fieldLabel:"标题",
									name:"txtTitle",
									allowBlank:false,
									listeners:{
										specialkey:function(field,e){
											//如果按下确认键,则提交
											if(e.getKey() == e.ENTER){
												//提交
//												 movieForm.getForm().submit();
												 Ext.MessageBox.alert("test","keydown");
											}
										}
									}
								},{
									//textfield director
									xtype:"textfield",
									fieldLabel:"导演",
									name:"txtDirector",
//									vtype:"alpha"
									vtype:"name"
								},{
									//textfield released
									xtype:"datefield",
									fieldLabel:"发布日期",
									name:"dtReleased",
									disabledDays:[1,2,3,4,5]
								},{
									//radio
									xtype:"radio",
									fieldLabel:"影片颜色",
									boxLabel:"黑白",
									name:"rdFilmColor",
									checked:true
								},{
									xtype:"radio",
									hideLabel:false,//default false 
									labelSeparator:"",//替换默认的:
									boxLabel:"彩色",
									name:"rdFilmColor"
								},{
									//checkbox
									xtype:"checkbox",
									fieldLabel:"影片好坏",
									name:"chkIsGood"
								},{
									//combobox
									xtype:"combo",
									fieldLabel:"类型",
									name:"cbGenre",
									displayField:"type",//要设置显示类型
//									mode:"local",//设置本地加载,如不设置,将不会加载数据
//									store:localStore,//使用本地
									store:jsonStore,
									triggerAction:"all",//要设置该信息,否则只能选择一次
									autoLoad:true,
									listeners:{
										select:function(cb,e,index){
											if(index == 0){
												Ext.MessageBox.alert("test","select");
											}
										}
									}
								},{
									//textArea || HTMLEditor
//									xtype:"textarea",
									xtype:"htmleditor",
									name:"txtDescription",
									hideLabel:true,
									labelSeparator:"",
//									height:"100%",
									anchor:"100%"
								}
							],
						buttons:[{
									text:"保存",
									handler:function(){
										movieForm.getForm().submit({
											success:function(f,a){
														console.debug(a.failureType);
														console.debug(a.response);
														//
														Ext.MessageBox.alert("Success!","Yes");
													},
											failure:function(f,a){
														console.debug(a.failureType);
														if(a.failureType == Ext.form.Action.SERVER_INVALID){
															Ext.MessageBox.alert("Warning!",a.result.errors);
														}else if(a.failureType == Ext.form.Action.CONNECT_FAILURE){
															Ext.MessageBox.alert("Warning!",a.response.statusText);
														}else{
															Ext.MessageBox.alert("Warning!","其它错误!");
														} 
														//
													}
										});
									}
								},{
									text:"重置",
									handler:function(){
											movieForm.getForm().reset();
									}
								}
							]
					});
//	//使用远程时要load,否则数据不展现
//	jsonStore.load();
					
	//动态加载数据
//	movieForm.getForm().findField("txtDirector").setValue("Jimjackson");
	
	//静态加载
	movieForm.getForm().load({
		url:"../saleInfo.do?method=getFormInfo",
		params:{id:"1"}
	});