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>