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>

form表单 获取与赋值的更多相关文章

  1. 微信小程序-form表单-获取用户输入文本框的值

    微信小程序-form表单-获取用户输入文本框的值 <input name='formnickname' class="textarea" placeholder=" ...

  2. form表单获取多选的值

    flask 中 form 表单直接获取多选框的值时 language = request.values.getlist('values')或 language=request.from.getlist ...

  3. 如何通过submit提交form表单获取后台传来的返回值

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_34651764/article/details/76373846 小伙伴是不是遇到过这样的问题 ...

  4. 通过form表单获取值

    <!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title> ...

  5. form 表单获取所有数据 封装方法

    function getFormJson(frm) { var o = {}; var a = $(frm).serializeArray(); $.each(a, function () { if ...

  6. 使用form表单提交请求如何获取后台返回的数据?

    问题描述 一般的form表单提交是单向的:只能给服务器发送数据,但是无法获取服务器返回的数据,也就是无法读取HTTP应答包. 想要真正的半双工通讯一般需要使用Ajax, 但是Ajax对文件传输也很麻烦 ...

  7. Ajax提交Form表单及文件上传

    刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...

  8. form表单与后台请求的关系

    开发中遇到一个问题,说这个问题前先看一下代码 后台方面, get请求: post请求: 前端方面: 问题是:当我点击提交表单后,页面会跳转成这样: 经过多番测试,原因竟是form表单的提交问题,如果用 ...

  9. 前端HTML基础之form表单

    目录 一:form表单 1.form表单功能 2.表单元素 二:form表单搭建(注册页面) 1.编写input会出现黄色阴影问题 三:完整版,前端代码(注册页面) 四:type属性介绍 1.inpu ...

随机推荐

  1. 知识点:MySQL表名不区分大小写的设置方法

    在用centox安装mysql后,把项目的数据库移植了过去,发现一些表的数据查不到,排查了一下问题,最后发现是表名的大小写不一致造成的. mysql在windows系统下安装好后,默认是对表名大小写不 ...

  2. (转)MTU&MSS

    MTU是Maximum Transmission Unit的缩写,意为最大传输单元,通俗的理解就是在网络上传送的最大数据包,单位是字节. 以太网对数据帧的长度都有一个限制,其最大值为1500,这个特性 ...

  3. 文本adversarial examples

    对文本对抗性样本的研究极少,近期论文归纳如下: 文本对抗三个难点: text data是离散数据,multimedia data是连续数据,样本空间不一样: 对text data的改动可能导致数据不合 ...

  4. python-day02-购物车

    购物车 需求: 1.启动程序后,让用户输入工资,然后打印商品列表: 2.容许用户根据商品编号购买商品: 3.用户选择商品后,检测余额是否足够,够了就直接扣款,不够就提醒客户: 4.随时可以退出,退出时 ...

  5. CS229 6.10 Neurons Networks implements of softmax regression

    softmax可以看做只有输入和输出的Neurons Networks,如下图: 其参数数量为k*(n+1) ,但在本实现中没有加入截距项,所以参数为k*n的矩阵. 对损失函数J(θ)的形式有: 算法 ...

  6. nvm use 指定版本后无效 win7

    如图所示,nvm install 6.12.3之后,使用命令nvm use 6.12.3,提示切换成功,但是执行node app.js时,报错没有node命令,执行nvm ls查看,发现没有任何版本是 ...

  7. c#上传文件并将word pdf转化成txt存储并将内容写入数据库

    c#上传文件并将word pdf转化成txt存储并将内容写入数据库 using System; using System.Data; using System.Configuration; using ...

  8. spring boot 自定义视图路径

    boot 自定义访问视图路径 . 配置文件 目录结构 启动类: html页面 访问: 覆盖boot默认路径引用. 如果没有重新配置,则在pom引用模板. 修改配置文件. 注意一定要编译工程

  9. 如何使用命令行备份SAP HANA数据库

    SAP HANA是一个在in-memory内存中的数据平台,部署为内部部署应用. 这是一个革命性的平台,它最适合进行实时分析,并开发和部署实时应用程序. 请点击这里了解更多有关SAP HANA. 通过 ...

  10. 12.通过微信小程序端访问企查查(采集工商信息)

    需要注意的问题: 一.1.微信端访问企查查小程序需要登录.2.访问抓包获取的url是有时效性的过一段时间就不能用了. http://xcx.qichacha.com/wxa/v1/base/getEn ...