Extjs3.2第一篇：formPanel的getForm().getValues()提交与处理

form表单提交，要注意可能没有key

前台代码：

<script type="text/javascript">

Ext.onReady(function() {
/**解决IE10 日期弹窗不完整 但还是会有阴影 **/
Ext.override(Ext.menu.Menu, {
autoWidth: function () {
this.width += 'px';
}
});
Ext.override(Ext.menu.Menu, {
autoHeight: function () {
this.height += 'px';
}
});
//初始化标签中的Ext:Qtip属性 开启提示功能
Ext.QuickTips.init();
//TextField的提示方式为右边缘  可为"qtip","title","under","side",id(元素id)
Ext.form.Field.prototype.msgTarget = 'side';
var formSet = new Ext.form.FieldSet({
title: '查询条件',
layout: 'form',
height: 300,
width: 500,
labelWidth: 70,
//可以margin-left
style: 'margin: 0 0 0 10px',
//才能出现线框
border: true,
//frame: true,这个应该只能用在window中 让他和背景色相同
items: [{
xtype: 'radiogroup',
fieldLabel: '性别',
items: [{
xtype: 'radio',
//所有的name都是传到后台的key
name: 'sex',
boxLabel: '男',
inputValue: '1'
//style: 'margin-left: -40px',
},{
xtype: 'radio',
name: 'sex',
boxLabel: '女',
inputValue: '2'
},{
xtype: 'radio',
name: 'sex',
boxLabel: '双性',
inputValue: '3',
checked: true
}]
},{
xtype: 'checkbox', 
   name: 'checkbox1',
   fieldLabel: '这个勾选',  
   //选中使他的值为1 
   inputValue : '1',
   checked: true,
   disabled : false
},{
xtype: 'checkbox', 
   name: 'checkbox2',
   fieldLabel: '这个不选',  
   //选中使他的值为1 
   inputValue : '1',
   disabled : false
},{
xtype: 'textfield',
name: 'name',
fieldLabel: '帐号',
emptyText: '请输入..',
// radio、text、password、file 
//field时 emptyText不能再用
//inputType: 'password',
//allowBlank: false,
blankText: '请输入密码..',
maxLength: 20,
minLength: 5,
maxLengthText: '不超过20个字符',
minLengthText: '不小于5个字符',
//输入框自动伸缩
grow: true,
growMin: 148,
growMax: 300
},{
xtype: 'textfield',
name: 'password',
fieldLabel: '密码'
},{
xtype: 'datefield',
name: 'startDate',
fieldLabel: '开始时间',
//对应月和天 大写为汉字 小写为数字
//对于年 Y为四位数字 y为后两位数字
//可以Y-m-d 也可以不用横杠则显示也没有横杠
format: 'Y-m-d',
//让输入框不能编辑 变成和点击右边图标的作用是一样的。这个好
editable: false,
//获得当前月份第一天显示 可以直接给出字符创'2017-04-21'
value: (new Date).getFirstDateOfMonth()
},{
xtype: 'datefield',
name: 'endDate',
fieldLabel: '结束时间',
format: 'Y-m-d',
editable: false
},{
xtype: 'button',
text: '提交',
handler: function() {
//直接用getForm().getValues()当参数提交
var form = Ext.getCmp('myForm').getForm();
var formValues = form.getValues();
Ext.Ajax.request({
url : '/extJS3.2Demo/FormCommitValueTest',
params : {
params : Ext.encode(formValues)
},
success : function (r,o){
Ext.Msg.alert('提示','提交成功');
},
failure : function (r,o){
Ext.Msg.alert('提示','提交失败');
}
});
}
}]
});
var form = new Ext.form.FormPanel({
id: 'myForm',
title: 'formpanel',
width: 800,
height: 800,
items: [formSet]
});
new Ext.Viewport({
items: [form]
});
});

</script>

界面如图：

后台：

String params = request.getParameter("params");
ObjectMapper mapper = new ObjectMapper();
Map<String, Object> map = mapper.readValue(params, Map.class);

用jackjson转成map方便后面操作。

json值：{"sex":"3","checkbox1":"1","name":"请输入..","password":"","startDate":"2017-04-01","endDate":""}

转成map后：{sex=3, checkbox1=1, name=请输入.., password=, startDate=2017-04-01, endDate=}

由于单选框或复选框若没选中，则作为key的name值是不会传到后台的，而继承子form.field的文本框则会。

所以可以进一步判断选框的key有没有map.containsKey("checkbox2")，