`

Extjs form 取值 赋值 重置

阅读更多

Extjs form 取值 赋值 重置

 

一、从form中获取field的三个方法:  

1、 Ext.getCmp('id');  
  
2、 FormPanel.getForm().findField('name');  
  
3、 Ext.get('id/name');//前提是FormPanel在界面上显示出来了!!!

 

二、ExtJS如何给textfield赋值的三个方法: 

var value="值";  
  
1、 fs.form.findField(name).setValue(value);  //前提是FormPanel在界面上显示出来了。
  
2、 Ext.get(id/name).setValue(value);  
  
3、 Ext.getCmp(id).setValue(value);  

 

三、ExtJS 重置表单的方法:

 

有三种方法能实现form表单的重置,假设var fs=new Ext.form.FormPanel({...});   
1、 fs.form.reset();//重置form   
2、 fs.getForm().getEl().dom.reset();//重置form   
3、 Ext.getCmp('fs').form.reset();  
 

 

 

四、formPanel组件load数据时combo的自动赋值:
 
  combo有个hiddenName这个属性,这个属性是真正提交的值,在加载的时候你将这个属性的设置到reader中,就可以自动选择到指定的值了,比如说:hiddenName:'value',那么你的reader中就应该有一个{name:'value'}.

 

 

 

实例分析:

1.给表格增加复选框:(增加了才能在点击某行时获取该行信息!)

var sm = new Ext.grid.CheckboxSelectionModel();

 

 

2.在列模型中加入复选框:

var cm=new Ext.grid.ColumnModel({
	columns:[
	    sm,
	  {
		id:'sh',
		header: '税号',
		width: 160, 
		dataIndex: 'swdjzh',
		sortable: true,
		align: 'left',
		hideable :true,
		css:"color:black;font-size:12px;"
	},
	...
	......

 

3.在表格中增加复选框:

var enGrid=new Ext.grid.GridPanel({
    store: store,
    cm: cm,
    sm:sm,
    title:"虚拟企业信息",
    collapsible: false,
    animCollapse: false,
    renderTo: 'query-grid',
    loadMask: new Ext.LoadMask(Ext.getBody(), {msg:'正在加载数据,请稍侯……'}),
    view: enView,
    stripeRows: true,
    tbar: [
   	    {
		xtype:'radio',   
	    boxLabel:'按机构代码',   
	    name:'ftype',   
	   // id:'sh',  
	    inputValue:'sh',
	    hideLabel:true,
	    listeners:{check:function(){
    		Ext.getCmp('paras').setValue("");
	    }}
	},
	 "-",
	...
	......
	...
	"-",
	{
		text:"审核",
		iconCls:'audit',
		handler:function(){
			auditWin.show();
			if(enGrid.getSelectionModel().hasSelection()){
				var records = enGrid.getSelectionModel().getSelections();//获取选中的行的记录
				var record = records[0].data;
				var czfpbm = record.czfpbm;
				var czfp;
				for (var int = 0; int < arrCode.length; int++) {
					var array = arrCode[int];
					if (array[0] == czfpbm) {
						czfp = array[1];
						break;
					}
				}	
				auditForm.getForm().findField("swdjzh").setValue(record.swdjzh);
				auditForm.getForm().findField("qymc").setValue(record.qymc);
				auditForm.getForm().findField("dh").setValue(record.dh);
				auditForm.getForm().findField("dz").setValue(record.dz);
				auditForm.getForm().findField("frdb").setValue(record.frdb);
				auditForm.getForm().findField("czfp").setValue(czfp);
				auditForm.getForm().findField("zczb").setValue(record.zczb);
				auditForm.getForm().findField("clrq").setValue(record.clrq);
			}
		}
	}]
	...
	......

 

 

 4.面板:

var auditForm = new Ext.FormPanel({
	frame:true,
	width:450,
	height:200,
	buttonAlign : "center",  
	labelWidth:65,
	labelAlign:"right",
	items:[{//行1
		layout:"column",
		items:[{
			columnWidth:.5,
			layout:"form",
			items:[{
				name:"swdjzh",
				xtype:"textfield",
				fieldLabel:"税务号",
				readOnly:true,
				style:"background:none;border:0px;",
				width:210
			}]
		},{
			columnWidth:.5,
			layout:"form",
			items:[{
				name:"qymc",
				xtype:"textfield",
				fieldLabel:"企业名称",
				readOnly:true,
				style:"background:none;border:0px;",
				width:210
			}]
		}]
	},{//行2
		layout:"column",
		items:[{
			columnWidth:.5,
			layout:"form",
			items:[{
				name:"frdb",
				xtype:"textfield",
				fieldLabel:"法人代表",
				readOnly:true,
				style:"background:none;border:0px;"
			}]
		},{
			columnWidth:.5,
			layout:"form",
			items:[{
				name:"dh",
				xtype:"textfield",
				fieldLabel:"联系方式",
				readOnly:true,
				style:"background:none;border:0px;"
			}]
		}]
	},{//行3
		layout:"column",
		items:[{
			columnWidth:.5,
			layout:"form",
			items:[{
				name:"czfp",
				xtype:"textfield",
				fieldLabel:"财政分片",
				readOnly:true,style:"background:none;border:0px;"
			}]
		},{
			columnWidth:.5,
			layout:"form",
			items:[{
				name:"clrq",
				xtype:"textfield",
				fieldLabel:"成立日期",
				readOnly:true,
				style:"background:none;border:0px;"
			}]
		}]
	},{//行4
		layout:"column",
		items:[{
			columnWidth:.5,
			layout:"form",
			items:[{
				name:"zczb",
				xtype:"textfield",
				fieldLabel:"注册资本",
				readOnly:true,
				style:"background:none;border:0px;"
			}]
		},{
			columnWidth:.5,
			layout:"form",
			items:[{
				xtype:"textfield",
				value:"(元)",
				fieldLabel:"【单位】",
				readOnly:true,
				style:"background:none;border:0px;font-weight:bold;color:red;",
				labelStyle:"font-weight:bold;color:red;"
			}]
		}]
	},{//行5
		name:"dz",
		xtype:"textfield",
		fieldLabel:"联系地址",
		readOnly:true,
		style:"background:none;border:0px;",
		width:332,
	}],
	buttons:[{
		text:"审核通过",
		handler:function(){
			var swdjzh = auditForm.getForm().findField("swdjzh").getValue();
			//异步发请求
			Ext.Ajax.request({
				url:"audit.reg?doType=auditEnterprise",
				method:"POST",
				params:{swdjzh:swdjzh,status:1},
				success:function(response,option){
					var result = Ext.util.JSON.decode(response.responseText);
					if(result.success){
						Ext.Msg.alert("成功","审核成功!");
						auditWin.hide();
						enStore.rejectChanges();
						enStore.reload();
					}
					else{
						Ext.Msg.alert("失败","审核失败!请重新审核");
						auditWin.hide();
						enStore.rejectChanges();
						enStore.reload();
					}
				},
				failure:function(response,option){
					Ext.Msg.alert("失败","删除过程中发生错误!");
					auditWin.hide();
					enStore.rejectChanges();
					enStore.reload();
				}
			});
		}
	},{
		text:"审核不通过",
		handler:function(){
			var swdjzh = auditForm.getForm().findField("swdjzh").getValue();
			//异步发请求
			Ext.Ajax.request({
				url:"audit.reg?doType=auditEnterprise",
				method:"POST",
				params:{swdjzh:swdjzh,status:0},
				success:function(response,option){
					var result = Ext.util.JSON.decode(response.responseText);
					if(result.success){
						Ext.Msg.alert("成功","审核成功!");
						auditWin.hide();
						enStore.rejectChanges();
						enStore.reload();
					}
					else{
						Ext.Msg.alert("失败","审核失败!请重新审核");
						auditWin.hide();
						enStore.rejectChanges();
						enStore.reload();
					}
				},
				failure:function(response,option){
					Ext.Msg.alert("失败","审核过程中发生错误!");
					auditWin.hide();
					enStore.rejectChanges();
					enStore.reload();
				}
			});
		}
	},{
		text:"取消",
		handler:function(){
			auditWin.hide();
		}
	}]
});

 

 

 
 

5.后台代码:

else if ("auditEnterprise".equals(action)) {
	String str;
	int status = Integer.valueOf(request.getParameter("status"));
	String swdjzh = request.getParameter("swdjzh");
	EnDao enDao = new EnDao();
	UserPostDao userDao = new UserPostDao();
	boolean done = enDao.updateEnterpriseStatus(swdjzh, status);
	if (done) {//更新企业信息成功
		if (status == 1) {
			done = userDao.updateUserStatus(swdjzh, 1);
			if (!done) {//更新用户信息失败
				enDao.updateEnterpriseStatus(swdjzh, 2);
			}
		}
		else {
			done = userDao.updateUserStatus(swdjzh, 0);
			if (!done) {
				enDao.updateEnterpriseStatus(swdjzh, 2);
			}
		}
	}
	if(done){
		str="{success:true}";
	}else{
		str="{success:false}";
	}
	response.setContentType("text/html;charset=UTF-8");
	PrintWriter out=response.getWriter();
	out.print(str);		
	out.close();
	return;
}

 
      

 

 

展示:



 

 
 

  • 大小: 3.2 KB
  • 大小: 7.3 KB
  • 大小: 25.6 KB
  • 大小: 7.2 KB
  • 大小: 22.4 KB
  • 大小: 6.8 KB
  • 大小: 7.8 KB
  • 大小: 3.2 KB
分享到:
评论

相关推荐

    EXTJS checkbox赋值

    在描述中提到的“最难解决的问题”——在修改时为`checkboxgroup`赋值,这是因为EXTJS默认的`setValue`方法可能不会按照期望的方式更新所有复选框的状态。为了解决这个问题,开发者通常需要自定义方法来处理。如示例...

    EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题

    总的来说,EXTJS Form Hidden Textfield的赋值问题可能是由于环境、时机或者与其他脚本冲突引起的。在确保问题定位准确后,可以采用更优雅的编程模式来避免类似问题。同时,持续保持EXTJS框架和依赖库的更新,也是...

    extjs-form组件配置参数详解

    ### extjs-form组件配置参数详解 #### 一、Ext.form.Action `Ext.form.Action`是ExtJS中的一个类,用于处理表单提交和加载数据的动作。它提供了多种配置选项和属性来控制表单操作的过程。 **配置项** - **success*...

    Mybatis/ibatiS多表映射 一对一 一对多 extjs前台取值 详细讲解

    本话题将深入探讨如何在这些框架中处理多表映射,包括一对一和一对多的关系,以及如何在ExtJS前端获取这些数据。 首先,我们来看Mybatis或iBatis在XML配置文件中的多表映射。以学生、班级和班主任为例,学生与班级...

    Extjs4的FormPanel从后台load json数据的要点

    `Ext.form.Panel`是Extjs4提供的一个用于创建复杂表单的组件。它允许开发者构建包含多个输入字段、按钮以及其他交互元素的表单,并且提供了大量的功能来帮助处理表单数据,如验证、提交以及数据绑定等。 ### 二、...

    extjs.form.file inputtype为“file”时无法用setValue方法赋值的解决方法

    NULL 博文链接:https://liyoro.iteye.com/blog/829896

    extjs4 入门基础,form、grid、tree

    ExtJS 是一个强大的JavaScript 框架,专用于构建富客户端Web应用程序。它提供了一整套组件化的用户界面元素,包括表单(Form)、网格(Grid)、树形视图(Tree)等,使得开发者能够创建出功能丰富且交互性强的前端...

    ExtJs 动态添加表单

    首先,我们要理解表单(Form)在ExtJS中的基本概念。表单是数据输入和验证的核心组件,可以包含各种字段类型,如文本框、下拉菜单、复选框等。这些字段可以通过`Ext.form.field.Field`基类进行扩展,每个字段都有其...

    学习ExtJS form布局

    一、 Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用。 hideLabels:tru表示隐藏标签,默认为false。 ...

    extjs4 grid(含form)

    extjs4 grid 包括form js代码

    EXTJS5 日期时分秒控件

    EXTJS5 日期时分秒控件,直接引用到程序中使用。网上有很多extjs4版本的和EXTJS5不兼容。调用实例代码: {labelWidth:60,width: 220,name:'mydate',fieldLabel: '日期',allowBlank: false,xtype: 'datetimefield',...

    ExtJs获取表单元素的值

    在本篇文章中,我们将深入探讨如何在ExtJs框架中有效地获取表单元素的值,并结合提供的代码示例进行详细解析。对于前端开发者来说,掌握如何高效地操作表单元素是必不可少的一项技能,尤其是在使用像ExtJs这样的强大...

    extjs DateField完全操作

    考虑到extjs DateField的关键配置和主要操作

    extjs之颜色选择器的使用

    EXTJS 是一个强大的JavaScript 应用程序框架,用于构建富客户端Web应用。ColorField 是EXTJS 中的一个组件,专门用于颜色选择。在EXTJS 应用中,颜色选择器提供了用户友好的界面,使得用户能够方便地从预设的颜色...

    Extjs优化(二)Form表单提交通用实现

    在本文中,我们将深入探讨如何优化EXTJS中的Form表单提交过程,特别是在EXTJS应用程序中。EXTJS是一个强大的JavaScript框架,用于构建富客户端Web应用程序,而表单提交是任何应用程序中不可或缺的部分。优化这一过程...

    extjs4.2 datetime控件

    3. **动态赋值**:描述中提到的“动态赋值”意味着你可以随时更改DateTime控件的值,而不仅仅是初始化时。这可以通过JavaScript代码直接设置控件的“value”属性,或者通过监听其他组件的事件来响应变化。 4. **...

    extjs中的xtype的所有类型介绍

    1. form - xtype: 'form', 描述: 表单面板 2. checkbox - xtype: 'checkbox', 描述: 多选框 3. combo - xtype: 'combo', 描述: 下拉框 4. datefield - xtype: 'datefield', 描述: 日期选择项 5. timefield - xtype: ...

    Extjs 后台模板

    2. **组件使用**:ExtJS 提供了各种组件,如 Grid(表格)、Panel(面板)、Form(表单)、Tree(树形结构)等,后台模板会使用这些组件创建常见的功能模块。例如,Grid 用于显示和操作数据,Panel 用于组织内容,...

    extjs表单提交例子

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

Global site tag (gtag.js) - Google Analytics