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>