form表单 获取与赋值

Posted 2020-09-09 折翼的飞鸟

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>