标签：sid 时间 element ems eset json div oca ready
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>
标签：sid 时间 element ems eset json div oca ready
原文地址：http://www.cnblogs.com/wind-wang/p/6690115.html
