Ext.onReady(function(){
//提示信息初始化
Ext.QuickTips.init();
var jsons = [
{cid:1,cname:"长沙"},
{cid:2,cname:"株洲"},
{cid:3,cname:"湘潭"},
{cid:4,cname:"衡阳"}
];
//创建代理
var proxy1 = new Ext.data.MemoryProxy(jsons);
var city = Ext.data.Record.create([
{name:"cid",type:"int",mapping:"cid"},
{name:"cname",type:"String",mapping:"cname"}
]);
//创建reader
var reader1 = new Ext.data.JsonReader({},city);
//远程调用的JSON数据
var reader = new Ext.data.JsonReader({},
[{name:"username",type:"String",mapping:"username"},
{name:"password",type:"String",mapping:"password"},
{name:"sex",type:"String",mapping:"sex"},
{name:"love",type:"String",mapping:"love"}]
);
//创建Store
var store1 = new Ext.data.Store({
proxy:proxy1,
reader:reader1,
autoLoad:true
});
var combobox = new Ext.form.ComboBox({
//renderTo:Ext.getBody(),
triggerAction:"all",
store:store1,
displayField:"cname",
valueField:"cid",
mode:"local",
emptyText:"请选择湖南城市"
});
//panel的子类formPanel,做一个登录的窗口==================================================
var formPanel = new Ext.form.FormPanel({
//url:'',//表单提交的地址
method:"post",
baseParams:{extra:"中华人民共和国",id:100},//隐藏表单域传值
defaultType:"textfield",//下面的items没有定义xtype属性时，默认为textfield
title:"会员注册",//标题
width:500,//宽度
height:400,//高度
bodyStyle:"padding:6px",//正文区域样式
frame:true,
labelAlign:"right",
items:[
//文本域
new Ext.form.TextField({
name:"username",
allowBlank:false,
width:200,
fieldLabel:"用户名",
labelAlign:"right"
//regex:/^\w{6,}$/自定义的规则
}),
//密码域
{
name:"password",//密码
width:200,
allowBlank:false,//是否允许为空
inputType:"password",//输入类型
xtype:"textfield",//相当于new Ext.form.textField
fieldLabel:"密码",//文本框提示信息
labelAlign:"right"
},
//单选按钮组
new Ext.form.RadioGroup({
name:"sex",
fieldLabel:"性别",
items:[
new Ext.form.Radio({
name:"radSex",//单选按钮的属性
checked:true,//是否被选中
boxLabel:"男",//显示值
inputValue:"man"//实际值
}),
new Ext.form.Radio({
name:"radSex",//单选按钮的属性
boxLabel:"女",
inputValue:"woman"
})
],
width:100
}),
//复选框组
new Ext.form.CheckboxGroup({
name:"love",
fieldLabel:"我的爱好",
items:[
new Ext.form.Checkbox({
name:"lovely",
boxLabel:"看EXT",
inputValue:"girl",
checked:true
}),
new Ext.form.Checkbox({
name:"lovely",
boxLabel:"上网",
inputValue:"internet"
}),
new Ext.form.Checkbox({
name:"lovely",
boxLabel:"钓鱼",
inputValue:"fish"
}),
new Ext.form.Checkbox({
name:"lovely",
boxLabel:"打牌",
inputValue:"card"
})
],
width:300
}),
//数字框
new Ext.form.NumberField({
fieldLabel:"最喜欢的数字",
width:200,
name:"numName"
}),
new Ext.form.TextField({
name:"urladdress",
allowBlank:false,
width:200,
fieldLabel:"个人喜欢的网站",
labelAlign:"right",
vtype:"url"
}),
new Ext.form.TextField({
name:"email",
width:200,
allowBlank:false,
fieldLabel:"个人邮箱",
labelAlign:"right",
vtype:"email"
}),
//下拉选项
combobox
,
//家庭地址，文本域
new Ext.form.TextArea({
name:"familyAddress",
fieldLabel:"家庭地址",
width:250,
height:50
}),
//时间点选择器
new Ext.form.TimeField({
name:"workTime",
xtype:"timefield",
fieldLabel:"上班时间",
increment:30,//增长间隔
format:"H:i",//格式
minValue:"6:00",//最小时间
maxValue:"21:00"//最晚时间
}),
//在线编辑器
//上传文件域
new Ext.form.TextField({
name:"photo",
fieldLabel:"上传照片",
inputType:"file",
width:"300px"
})
],
buttons:[{
text:"用户注册",
tooltip:"点击此按钮<br>进行用户注册",
tooltipType:"qtip",
handler:function(){
var username = formPanel.getForm().findField("username").getValue();
var password = formPanel.getForm().findField("password").getValue();
Ext.MessageBox.alert("提示信息",username+"正在登录,密码为:"+password);
//提交表单是以AJAX提交的(默认)
}
},{
text:"重置",
tooltip:"点击此按钮,<br>您填写的值将会被清空",
tooltipType:"qtip",
handler:function(){
formPanel.getForm().reset();//重置表单
}
},{//用本地的数据初始化
text:"本地数据",
tooltip:"点击此按钮,<br>表格将会被本地数据初始化",
tooltipType:"qtip",
handler:function(){
var json = {
username:"朱湘鄂",
password:"123123",
sex:"woman",//单选按钮不支持中文
love:"card"
};
formPanel.getForm().setValues(json);//重置表单
}
},{//用本地的数据初始化
text:"远程数据",
tooltip:"点击此按钮,<br>表格将会远程数据被初始化",
tooltipType:"qtip",
handler:function(){
formPanel.getForm().reader = reader;//
formPanel.load({url:"../formJson"});
}
}],
buttonAlign:"center",
renderTo:Ext.getBody()
});
});
![SpringMVC 返回json的两种方式[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)