zoukankan      html  css  js  c++  java
  • 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表单获取与赋值",
                        650,
                        height:250,
                        border:true,
                        renderTo:Ext.getBody(),
                        items:[
                            {
                                xtype:"textfield",
                                fieldLabel: "姓名",
                                200,
                                labelWidth:80,
                                name:"UserName"
                            }, {
                                xtype:"textfield",
                                fieldLabel: "手机号",
                                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,
                                 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",
                                 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="700px; height: 100px;"> </textarea>
            </div>
  • 相关阅读:
    Visual Studio使用技巧笔记(引用程序集自动复制dll到引用项目目录)
    图解-Excel的csv格式特殊字符处理方式尝试笔记(个人拙笔)
    Nuget.config格式错误,请检查nuget.config配置文件
    securecrt切换会话(session)的显示方式
    javascript将分,秒,毫秒转换为xx天xx小时xx秒(任何语言通用,最通俗易懂)
    Http状态码枚举(摘自 Microsoft 程序集 System.dll)
    Visual Studio 提示某个dll文件(已在Microsoft Visual Studio 外对该文件进行了修改,是否重新加载它)
    IIS Express mime type 列表。
    为什么要 MySQL 迁移到 Maria DB
    降维技术---PCA
  • 原文地址:https://www.cnblogs.com/wind-wang/p/6690115.html
Copyright © 2011-2022 走看看