form表单 获取与赋值

form表单中使用频繁的组件: 文本框、单选框、多选框、下拉框、文本域
form通过getValues()获取表单中所有name的值

通过setValues({key:values})给对应的name值进行赋值,其中key对应的name值

 

在给单选框和多选框赋值时,有几个疑惑的地方:
  1. fieldName和name 是否必须一致 ?

         (fieldName删除对结果没什么影响,表单是通过name值去获取值得)


    2. name与子项的name 也一致是为何?
      (个人理解

      通过getValues获取值时是key:value,单选框和多选框子项有多个,获取的value值时子项值的集合,而不能找到具体到对象

      此时要再进行一次key:value赋值,所以在代码中赋值时就出现了,value.key = {key: value.key},
                 举个例子:
                    var set_values = { radioName:0 };
                    此时set_values是单选框获取的值,是一个结果,要将其赋值必须先找到单选框对象,然后在定位到单选框子对象
                    所以setValues(set_values) 其实单选框对象,而没有具体到子对象,因此要再进行一次setValues
                    转换的格式就是:
                        var set_new_values = {}
                        var set_new_values.radioName = {
                            radioName: set_values.radioName
                        }

                    form.setValues(set_new_values);  
                    此时就可以定位到单选框子对象

     多选框和单选框的逻辑是一直,区别只是单选框值只有一个,而多选框值时一个数组
  )

重复知识点: 

    JSON.parse(jsonstr);      //可以将json字符串转换成json对象 

    JSON.stringify(jsonobj); //可以将json对象转换成json对符串

 

        Ext.onReady(function(){//Ext.Msg.alert("提示","hello world...")var ageStore = new Ext.data.Store({fields: ['text', 'id'],data: [{"id":18,"text":"18"},{"id":19,"text":"19"},{"id":20,"text":"20"},{"id":21,"text":"21"}],autoLoad: true});//1.创建一个form表单var formpanel = Ext.create("Ext.form.Panel",{title:"form表单获取与赋值",width:650,height:250,border:true,renderTo:Ext.getBody(),items:[{xtype:"textfield",fieldLabel: "姓名",width:200,labelWidth:80,name:"UserName"}, {xtype:"textfield",fieldLabel: "手机号",width:200,labelWidth:80,name:"Tel"},{xtype: "combo",fieldLabel: "年龄", fieldName: "UserAge",name: "UserAge",labelWidth: 80,allowBlank: false,blankText: "年龄不能为空",autoFitErrors: true,mode: 'local',msgTarget: "side",store: ageStore, displayField: "text",valueField: "id"}, {xtype: "checkboxgroup",fieldLabel: "上课时间",labelWidth: 80,width: 600,name: "Weeks",fieldName: "Weeks",items: [{boxLabel: "星期一",name: "Weeks",inputValue: 1,checked: true}, {boxLabel: "星期二",name: "Weeks",inputValue: 2, }, {boxLabel: "星期三",name: "Weeks",inputValue: 3, }, {boxLabel: "星期四",name: "Weeks",inputValue: 4, }, {boxLabel: "星期五",name: "Weeks",inputValue: 5, }, {boxLabel: "星期六",name: "Weeks",inputValue: 6, }, {boxLabel: "星期日",name: "Weeks",inputValue: 0, }]}, {xtype: "radiogroup",width: 300,labelWidth: 80,fieldLabel: "上课/兼职",fieldName: "RadioTimeSpanType",name: "RadioTimeSpanType",items: [{ boxLabel: "去上课", name: "RadioTimeSpanType", inputValue: 0, checked: true },{ boxLabel: "去兼职", name: "RadioTimeSpanType", inputValue: 1}], listeners: {change: function(obj, newValue, oldValue, eOpts){// 单选事件   
                                }}}],buttons:[{text:"保存",handler:function(){var values = formpanel.getForm().getValues();// JSON.parse(jsonstr); //可以将json字符串转换成json对象// JSON.stringify(jsonobj); //可以将json对象转换成json对符串 document.getElementById("save_values").value = JSON.stringify(values);}}, {text:"清空",handler:function(){formpanel.getForm().reset();}}, {text:"自动填充",handler:function(){//获取填充的值var values = document.getElementById("save_values").value ;if(values){//注意,获取的值必须是json格式才可以var json_values = JSON.parse(values); //可以将json字符串转换成json对象 //文本框和下拉框赋值就是key:value就可以//单选框和复选框有点不一样// 将key:value值转成key:{key:value}类型json_values.Weeks = {Weeks: json_values.Weeks}json_values.RadioTimeSpanType = {RadioTimeSpanType: json_values.RadioTimeSpanType}//赋值
                                    formpanel.getForm().setValues(json_values);}}} ]});});


//下面是body中显示值的div
<div>
            form的值:<br/>
            <textarea id="save_values" style="width:700px; height: 100px;"> </textarea>
        </div>

 

转载于:https://www.cnblogs.com/wind-wang/p/6690115.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/371129.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Zabbix全方位告警接入-电话/微信/短信都支持

http://www.cnblogs.com/baidu-gaojing/p/5128035.html 百度告警平台地址&#xff1a; http://gaojing.baidu.com 联系我们&#xff1a; 邮箱&#xff1a;gaojingbaidu.com 电话&#xff1a;13924600771 QQ群&#xff1a;183806029 对于使用zabbix的用户&#xff0c;要接入百度…

Spring MVC定制用户登录注销实现示例

这篇文章描述了如何实现对Spring MVC Web应用程序的自定义用户访问&#xff08;登录注销&#xff09;。 作为前提&#xff0c;建议读者阅读这篇文章 &#xff0c;其中介绍了一些Spring Security概念。 该代码示例可从Spring-MVC-Login-Logout目录中的Github获得。 它从带有注释…

HTML5与CSS3权威指南笔记案例1

第1章 <!DOCTYPE html> <meta charset "UTF-8"> <title> Search </title> <form> <p><label>Search&#xff1a;<input name"search" autofocus></label> </p> </form> <!DOCTYPE&…

java循环的概念_Java数据结构之循环队列简单定义与用法示例

本文实例讲述了Java数据结构之循环队列简单定义与用法。分享给大家供大家参考&#xff0c;具体如下&#xff1a;一、概述&#xff1a;1、原理&#xff1a;与普通队列的区别在于循环队列添加数据时&#xff0c;如果其有效数据end maxSize - 1(最大空间)的话&#xff0c;end指针…

Unrecognized option: -jrockit

weblogic报错&#xff1a; starting weblogic with Java version: Unrecognized option: -jrockit Error: Could not create the Java Virtual Machine. Error: A fatal exception has occurred. Program will exit. Starting WLS with line: /data/jdk1.8.0_45/bin/java -jroc…

51nod 1105 第K大的数

基准时间限制&#xff1a;1 秒 空间限制&#xff1a;131072 KB 分值: 40 难度&#xff1a;4级算法题 数组A和数组B&#xff0c;里面都有n个整数。数组C共有n^2个整数&#xff0c;分别是A[0] * B[0],A[0] * B[1] ......A[1] * B[0],A[1] * B[1]......A[n - 1] * B[n - 1]&#x…

在Tomcat上设置和使用Apache Solr

前一阵子花了一点时间来玩Solr&#xff0c;但立即被我们可以在一些更大的数据集上获得的性能所震撼。 这是我的一些初始设置和配置学习信息&#xff0c;也许可以帮助某人启动它并更快地运行。 首先在Windows上进行设置。 下载并解压缩Apache Tomcat和Solr&#xff0c;然后将其复…

sass变量

sass变量用法 1、sass变量必须以$符开头&#xff0c;后面紧跟着变量名 2、变量值和变量名之间就需要使用冒号(:)分隔开&#xff08;就像CSS属性设置一样&#xff09; 3、如果值后面加上!default则表示默认值 默认变量 sass的默认变量&#xff1a;仅需要在值后面加上!defaul…

西安4年java多少时间_西安学习java一般要多久

线程小n行的任务/任务执的数单个量为间隔执行池大所需时间时间&#xff0c;西安学习的配置&#xff0c;西安学习行定行池务的务执c配在执注置任方法时任上标&#xff0c;下解行调问题务的方度任有以异步决办采用法&#xff1a;上述式执。比如、般要多本名(套接套接5套t地地节点…

js 递归函数的使用及常用函数

1.递归函数的使用&#xff1a; 公园里有一堆桃子&#xff0c;猴子每天吃掉一半&#xff0c;挑出一个坏的扔掉&#xff0c;第6天的时候发现还剩1个桃子&#xff0c;问原来有多少个桃子 var peache;function peaches(n) { if (n 6) { peache 1; } else { …

redis分布式锁-SETNX实现

转自&#xff1a;https://my.oschina.net/u/1995545/blog/366381 Redis有一系列的命令&#xff0c;特点是以NX结尾&#xff0c;NX是Not eXists的缩写&#xff0c;如SETNX命令就应该理解为&#xff1a;SET if Not eXists。这系列的命令非常有用&#xff0c;这里讲使用SETNX来实现…

sql java驱动程序_Microsoft SQL Server JDBC 驱动程序支持矩阵

本页包含 Microsoft SQL Server JDBC 驱动程序的支持矩阵和支持生命周期策略。Microsoft JDBC 驱动程序支持生命周期矩阵和策略Microsoft 支持生命周期 (MSL) 策略提供了与 Microsoft 产品的支持生命周期有关的可预测透明信息。 自驱动程序发布之日起&#xff0c;JDBC 驱动程序…

使用直接内存时可以更快

总览 使用直接内存不能保证提高性能。 考虑到它增加了复杂性&#xff0c;除非有充分的理由使用它&#xff0c;否则应避免使用它。 塞尔吉奥奥利维拉&#xff08;Sergio Oliveira Jr&#xff09;的这篇出色文章表明&#xff0c;这不仅仅是使用直接内存来提高性能的问题&#x…

POJ 3977 折半枚举

链接&#xff1a; http://poj.org/problem?id3977 题意&#xff1a; 给你n个数&#xff0c;n最大35&#xff0c;让你从中选几个数&#xff0c;不能选0个&#xff0c;使它们和的绝对值最小 如果有一样的&#xff0c;取个数最小的 题解&#xff1a; np难题&#xff0c;但是因为…

java踩坑记

1.String 相等 稍微有点经验的程序员都会用equals比较而不是用 &#xff0c;但用equals就真的安全了吗&#xff0c;看下面的代码 user.getName().equals("xiaoming"); 有经验的老司机很快就能看到问题&#xff0c;如果user.getName()为null,就会抛出空指针异常&#…

java taken_java-是否有正确的方法在slf4j中传递参数?

第三变种是最好的。实际上&#xff0c;第一种情况是通过StringBuilder进行的字符串连接。第二和第三种情况相同。他们需要将整数值装箱到Integer(或其他Object)&#xff0c;然后创建一个数组来打包它们。在我的机器上进行的简单测试表明&#xff0c;如果不执行日志记录&#xf…

html常用小知识

请求重定向&#xff1a;加载页面之后&#xff0c;除了用js做重定向之外&#xff0c;我们还可以直接用<meta>标签做重定向。 1 <meta http-equiv"refresh" content"5;urlhttp://www.baidu.com" /> 5秒后跳转 超链接&#xff1a;在当前的iframe…

MyEclipse快捷键大全【转】

-------------------------------------MyEclipse 快捷键1(CTRL)-------------------------------------Ctrl1 快速修复CtrlD: 删除当前行 CtrlQ 定位到最后编辑的地方 CtrlL 定位在某行 CtrlO 快速显示 OutLine CtrlT 快速显示当前类的继承结构 CtrlW 关闭当前Editer Ct…

根据您的命令-命令设计模式

命令设计模式是一种广为人知的设计模式&#xff0c;它属于行为设计模式&#xff08;“四人帮”的一部分&#xff09;。 顾名思义&#xff0c;它与应用程序中的动作和事件有关。 问题陈述&#xff1a; 假设有一个网页将在其中包含多个菜单的情况。 编写此代码的一种方法是使条件…

用js和jQuery做轮播图

Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:relative; }.images{position:relative;width: 100%;height: 400px; } .images img{position:absolute;left: 0;top: 0;width: 100%;height: 400px;opacity: 0;fi…