Extjs form 取值 赋值 重置

最新推荐文章于 2021-06-23 14:45:04 发布
原创 最新推荐文章于 2021-06-23 14:45:04 发布 · 1.5k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Extjs #form

本文深入探讨了使用ExtJS进行表单数据的获取、赋值及重置方法，包括从form中获取field值、为textfield赋值以及实现form表单的重置。同时展示了如何在表格加载数据时自动给combo组件赋值，以及在表格中加入复选框并实现在点击某行时获取该行信息的功能。通过实例分析，详细阐述了在实际应用中如何运用这些方法来提升用户体验。
部署运行你感兴趣的模型镜像

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;
}

 
      

 

 

展示：



 

 
 

您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

Stable-Diffusion-3.5

图片生成
Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率

ExtJs获取表单元素的值
09-05
通过多级的代码来获取组件当中表单元素值的一些技巧
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
12-03
总的来说，EXTJS Form Hidden Textfield的赋值问题可能是由于环境、时机或者与其他脚本冲突引起的。在确保问题定位准确后，可以采用更优雅的编程模式来避免类似问题。同时，持续保持EXTJS框架和依赖库的更新，也是...
extjs form 取值 赋值 重置
weixin_33958366的博客
02-19 158
一、从form中获取field的三个方法： １、Ext.getCmp('id'); ２、FormPanel.getForm().findField('id/name'); ３、Ext.get('id/name');//前提是FormPanel在界面上显示出来了。   二、ExtJS如何给textfield赋值的三个方法： var value="值"; １、 fs.form.findF...
ExtJs6获取form里的数据
Jinyao的博客
07-27 1095
ExtJs6获取form里的数据 1.PanoramForm.js form的items部分 items: [{ xtype: 'form', id:'customerF', modelValidation: true, defaults: { labelAlign: 'left', m...
ExtJs formPanel(二、表单提交和取值)
WEBCODE
07-29 267
在Ext中FormPanel并中并不保存表单数据，其中的数据是由BasicForm保存，在提交表单的时候需要获取当前FormPanel中的BasicForm来进行提交. 在获取BasicForm对象后便可进行表单的提交操作... 此时需要查一下BasicForm 的API文档， 1.首先取值可以通过findField方法来寻找name,等还可以使用其它方法 simple.getFor...
extjs form表单的重置 (增加和修改值冲突问题)
weixin_33827590的博客
08-15 184
在常用的代码中，我们使用AddForm.form.reset();或者AddForm.getForm().reset();来将FormPanel重置。 但是当页面增加和修改公用一个formpanel时，当先点击修改时，窗体修改显示出数据，关闭窗体后（window.hide()）但是当你再点击增加的时候，随便你怎么去操作，新增时你会发现窗体上还是显示这些数据。而如果你先新增再查看修改，侧以后永远都...
学习ExtJS form布局
01-21
一、 Form布局由类Ext.layout.FormLayout定义，名称为form，是一种专门用于管理表单中输入字段的布局，这种布局主要用于在程序中创建表单字段或表单元素等使用。 hideLabels：tru表示隐藏标签，默认为false。 ...
extjs form 赋值
06-09
可以使用 `form.setValues()` 方法来给 ExtJS 表单赋值。 示例代码如下： ```javascript // 假设我们有一个表单 var form = Ext.create('Ext.form.Panel', { // 表单的配置项 // ... }); // 定义需要赋值的数据...
精选资源
extjs form textfield的隐藏方法
01-19
this.formpanel = new Ext.FormPanel({ items: [{ fieldLabel: ‘代码’, name: ‘FCode’, anchor:’100%’, id: ‘fid’ },{ fieldLabel: ‘名称’, name: ‘FName’, anchor:’100%’ // anchor width by ...
form取值
mickey
02-13 226
var form = this.up('form').getForm();//获取表单对象 var field=form.findField("cloudSubsriberId");//表单取值“id:'cloudSubsriberId'” var value=field.getValue(); if (null...
form表单取值
qq_41816742的博客
06-23 1063
jquery取值 <form action="" id="test_form"> </form> 使用：var data = $("#test_form").serializeJson();//返回json对象 输出：序列化为json格式为：{key1:value1,key2:value2} JSON.stringify(data) 转换为JSON字符串传给后端 ----------------------------------------------------..
ExtJS4——表单的提交重置
u013127751的博客
03-23 1093
给表单添加了提交和重置按钮，对表单提交的信息进行监听。对于窗口的图标和验证码的图标请自行添加。 .loginicon { background-image: url(image/login.gif) !important; } Ext.onRead
关于ExtJs Form表单的赋值、获取、重置
weixin_30527551的博客
04-30 331
【获取】 １、Ext.getCmp('id'); ２、FormPanel.getForm().findField('id/name'); ３、Ext.get('id/name');//前提是FormPanel在界面上显示出来了。4.form.query('numberfield[name="smsplancount"]')[0]form.query('[name="smsmanager"]'...
Extjs4+SpringMVC前台表单Form赋值问题
gongyaohui86的博客
06-21 1327
常用两种方式： 1)form.loadRecord(record); 2)form.getForm().load(); 第一方式很简单，传值方式； 第二种方式是后台重新查询返回结果集再给表单赋值，现在主要讲这种方式。 官方文档： var myFormPanel = new Ext.form.Panel({ title: 'Client and routing info',
Extjs的单选框和复选框的取值与赋值
zyjustin9的专栏
12-11 2802
Extjs的单选框和复选框的取值与赋值   1.取值：取值方式和textfield一样，有2中方式： (1).Ext.getCmp("id").getValue(); (2).form.getForm().findField("name").getValue(); 区别：单选复选框取的只有“true/false”！2.赋值：赋值方式和textfield一样，有2中方式： (1).Ex...
Extjs取得某个控件并赋值
热门推荐
jdzms23的专栏
09-27 1万+
在开发的很多时候,在调用另一个弹出页面或修改完一个内容后,需及时地反应出来,就这需要在修改后及时的给原有的框框赋值... 实际操作也是很简单,如: Ext.getCmp('listname').setValue(updateitemname); 顺便也记录下网上收集来的一些总结经验.. ExtJS 给textfield赋值的方法总结  省得忘了不知道去那找了._^
extjs form 取值 赋值 重置 1
fengoh的专栏
03-25 581
 [javascript] view plaincopyprint? 一、从form中获取field的三个方法：    １、Ext.getCmp('id');    ２、FormPanel.getForm().findField('id/name');    ３、Ext.get('id/name');//前提是FormPanel在界面上显示出来了。     
Ext Form表单设置值
Time and time
12-25 946
form.getForm().setValues({ fieldName : value }); 通过构建一个json对象，传递到setValues中 fieldName 为form表单元素的name属性 value为要设置的值
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值