`
lvzhangsheng
  • 浏览: 6351 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

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('planGroupCode').editable=true;
			    	 Ext.getCmp("pgAdd-window").setTitle('添加新计划组');
			    	 opName='add';
					 Ext.getCmp("pgAdd-window").show();
		           }
		        },
{   
		            id:'editrMenu',   
		            text : '修改计划组信息',
		            //修改菜单点击事件   
		             handler:function (node){ 
					 Ext.getCmp('pgAddForm').getForm().reset();
					 Ext.getCmp("pgAdd-window").setTitle('修改计划组信息');
					 Ext.getCmp('pgAddForm').getForm().findField('planGroupCode').setValue(salecatalogTree.getSelectionModel().getSelectedNode().id);
					 Ext.getCmp('pgAddForm').getForm().findField('planGroupCode').editable=false;
					 Ext.getCmp('pgAddForm').getForm().findField('planGroupName').setValue(salecatalogTree.getSelectionModel().getSelectedNode().text);
					 opName='update';
					 Ext.getCmp("pgAdd-window").show();
		            }

 

分享到:
评论

相关推荐

    ExtJs 动态添加表单

    ExtJS 是一个强大的JavaScript库,...总之,动态添加表单是ExtJS开发中的一个重要技巧,它允许我们根据用户交互或程序逻辑灵活地调整表单结构。结合源码和工具,开发者可以构建出高度可定制和交互性强的Web应用界面。

    EXTJS修改颜色实例源码

    EXTJS 是一个基于 JavaScript 的富客户端应用框架,用于构建功能丰富的、交互性强的 Web 应用程序。在提供的实例源码中,我们看到的是...对于初学者,这个实例是一个很好的起点,可以帮助理解 EXTJS 的基本概念和用法。

    如何提交Extjs 中的表单

    创建一个基本的表单,你可以这样写: ```javascript var formPanel = Ext.create('Ext.form.Panel', { title: '表单示例', width: 400, bodyPadding: 10, renderTo: Ext.getBody(), items: [{ xtype: '...

    extjs加水印

    EXTJS是一个强大的JavaScript库,用于构建富客户端的Web应用程序,而水印则是一种有效的方法,可以防止用户对屏幕内容进行未经许可的复制或拍照。 首先,我们来看EXTJS中的水印实现。EXTJS允许开发者自定义组件,...

    ExtJs4.0 表单提交Demo

    - **创建表单组件**:首先,定义一个FormPanel,并在其内部添加所需的表单字段,例如`Ext.form.field.Text`、`Ext.form.field.Date`等。 - **配置表单行为**:为FormPanel设置action属性,指定提交的URL,或者在...

    这是有关extjs的例子,里面有各种表单的定义,grid的实现

    ExtJS 是一个强大的JavaScript框架,主要用于构建富客户端的Web应用程序。它提供了丰富的组件库,包括数据绑定、模型、视图、控制器等概念,使得开发者能够创建功能丰富的、交互性强的前端应用。在这个有关ExtJS的...

    extjs动态表单

    从提供的标签“源码”和“工具”来看,可能包含的资源kk.doc可能是一个示例代码文档或教程,展示了如何在ExtJS中创建和操作动态表单的详细步骤和代码片段。对于初学者来说,阅读和理解这样的文档有助于深入掌握动态...

    ExtJs获取表单元素的值

    假设我们有一个名为`searchlist`的面板,其中包含了我们需要操作的表单,可以通过以下方式获取表单的值: ```javascript var objectjson = Ext.getCmp('searchlist').getForm().getValues(); ``` 这里,`Ext....

    ExtJS的表单

    ExtJS的表单使用FormPanel容器 表单使用的布局方式:form和formtable布局 ExtJS的表单和html的form标签是相似的,新建一个FormPanel实际上就是新建一个html的form标签,只是添加许多Ext的样式而已

    extjs表单提交例子

    保存提交代码,extjs4.0 // 重置 和 保存 按钮. buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '保存', /*formBind: true, //only enabled once the ...

    extjs最简单的数据绑定和修改

    ExtJS 是一个强大的JavaScript 框架,主要用于构建富客户端应用程序。它的数据绑定功能是其核心特性之一,允许开发者将用户界面元素与后端数据源紧密连接,实现数据的自动同步。在“extjs最简单的数据绑定和修改”这...

    extjs4的Ext.frorm.Panel控件属性说明和表单控件说明

    主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...

    extjs表单中的下拉框(comobobox)手动添加空选项

    在开发Web应用程序时,ExtJS 是一个非常强大的库,它提供了丰富的组件和API来帮助开发者构建复杂的用户界面。其中一个常用的组件就是`ComboBox`(组合框),它可以用来创建一个包含可选择项目的下拉列表。在某些场景...

    ExtJS 界面设计器

    1. **ExtJS框架**:ExtJS是Sencha公司开发的一个开源JavaScript库,它提供了大量的预定义组件,如表格、面板、菜单、按钮等,用于构建复杂的、数据驱动的Web应用。它的MVC(模型-视图-控制器)架构和数据绑定机制...

    Extjs4添加tooltip

    Extjs4的textfield控件竟然没有tooltip悬浮提示,这应该算是个bug吧。网上查了很多,也没有方案。后来自己通过查询并整理出这个方案,终于实现了。 思想如下: 在textfield渲染时注册mouseover事件,然后在其中调用...

    Extjs验证表单 Extjs验证表单

    ### Extjs 表单验证详解 #### 一、引言 在现代Web开发中,确保用户输入的有效性和安全性至关重要。Extjs作为一种强大的JavaScript框架,提供了丰富的功能来...希望本文能帮助你更好地理解和应用Extjs的表单验证技术。

    extJS4.2 用户表单

    参考以前资源,用extJS4.2.1版本做的一个demo示例,希望对大家有用。

    extjs3 window窗口修改完退出提示是否保存

    本话题主要关注如何在EXTJS3的Window组件中实现一个功能:当用户在窗口内修改了数据后,关闭窗口时提示用户是否保存更改。未进行修改的情况下,窗口可以直接关闭,不显示任何提示。 首先,我们需要创建一个基本的...

    extjs表单验证特殊字符

    上述示例中,`^[a-zA-Z0-9_]*$`是一个正则表达式,它表示字符串只能由字母、数字和下划线组成,不能有其他字符。 4. **全局验证(Ext.form.Basic)**: EXTJS还提供了`Ext.form.Basic`类,允许在表单级别执行全局...

Global site tag (gtag.js) - Google Analytics