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

ExtJS 添加和修改共用一个表单

最近开始接触ExtJs,在做数据提交和修改的时候老是使用两个表单感觉很别扭,于是在网上查了如何共用表单,最后没有搜索到满意的答案,不过还是实现了,只是我的方法有点笨拙,如果大家有更好的办法,希望赐教

?

//定义操作名称和表单提交的URL
var opName='add';
var opUrl='addPlanGroup';
//定义提交数据的表单
var pgAddForm=new Ext.form.FormPanel({
							id:'pgAddForm',
							bodyStyle:'padding:5px',
							labelWidth:80,
							defaults:{anchor:"95%"},
							baseCls:"x-plain",
							items:[{
									xtype : "textfield",
									fieldLabel: '计划组编号',
							    	emptyText:'请输入计划组编号',
							    	name:'planGroupCode',
							    	allowBlank:false,
							    	validator:function(value){
							    	   if(value.length>0){
							    		   return true;
							    	   }else{
							    		    return "请输入计划组编号!";
							    	   }
							        }
									},
									{
										xtype : "textfield",
										fieldLabel: '计划组名称',
								    	emptyText:'请输入计划组名称',
								    	name:'planGroupName',
								    	allowBlank:false,
							        	validator:function(value){
							    	   if(value.length>0){
							    		   return true;
							    	   }else{
							    		    return "计划组名称!";
							    	   }
							        }
									},
									{
										xtype : 'combo',
										        fieldLabel:'计划组类型',
												name:'planGroupType',
												hiddenName:"planGroupTypeValue",
												emptyText:"请选择...",
												mode :"local",
												valueField:"paraValue",
												displayField:"remark",
												editable:false,
												triggerAction:"all",
												allowBlank:false,
												store:pgTypeStore		
									}]
						});
//定义装载表单的窗体
var pgAddWindow = new Ext.Window(
								{
									id : 'pgAdd-window',
									title:'创建新计划组',
									plain : true,
									width : 460,
									autoScroll : true,
									modal : true,
									items : [pgAddForm],
									closeAction : "hide",
									buttons : [{
										text : "确 定",
										handler : function() {
											if(opName=='add'){
												opUrl='addPlanGroup';
											}else{
												opUrl='updatePlanGroup';
											}
											var base_account_form = Ext.getCmp('pgAddForm').getForm('planGroupName');
											if (!base_account_form.isValid()) {return;} 
											else {
												pgAddForm.getForm().doAction("submit",
													{
														
														url : opUrl,
														method : 'post',
														timeout : 10000,
														waitTitle : '请稍等……',
														waitMsg : '提交中……',
														success : function(form,action) {
															var json = action.result;
															checkAjaxSessionTimeOut(json);
															if (json.messagecode=="0"){
																showResult();    //弹出层
																Pause(this,sleep_time);//调用暂停函数   
																this.NextStep=function(){   //暂停后执行的代码
															 salecatalogTree.root.reload();
															 salecatalogTree.expandAll();
															 Ext.getCmp("pgAdd-window").hide();
															 base_account_form.reset();
															 };
															 }
															else
															 {
															 Ext.Msg.alert('消息', "操作失败:"+json.obj);
															 }
														},
														failure : function(form,action) {
															Ext.Msg.alert('消息',"操作失败!");
															Ext.getCmp("pgAdd-window").hide();
														}
													});
								}
							}
						},
						{text : "取 消",
						 handler : function() {
							Ext.getCmp("pgAdd-window").hide();
							}
						}]
						});

//树状结构菜单中的添加和修改操作
{ 
	            text : ' 添加新计划组',
	            hide:true,
	            //增加菜单点击事件   
	            handler:function (node){
	        	if(salecatalogTree.getSelectionModel().getSelectedNode().id!='1'){
			       	    	 Ext.Msg.alert("系统提示","计划组之间目前未关联!");
			       	    	 return;
				   }
			    	 Ext.getCmp('pgAddForm').getForm().reset();	 
			    	 Ext.getCmp('pgAddForm').getForm().getEl().dom.reset();//重置表单中所有组件,包括组件的属性
			    	 Ext.getCmp('pgAddForm').getForm().findField('planGrou