ExtJs中的表单提交和页面弹出表单

来源：互联网发布：如何通过淘宝试用编辑：程序博客网时间：2024/05/02 00:24

1.表单提交

代码：

form.jsp页面：

<formid="panel22"action="getTest.jsp"method="post"></form>

form.js：

[javascript] view plaincopy

//创建表单面板
var MyformPanel=Ext.create('Ext.form.Panel', {
frame: true,
title: 'FormFields Validation',
width: 340,
bodyPadding: 5,
renderTo:"panel22", //渲染到页面的form中去
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%',
//错误提示显示在下方，还可以配置为side、title、none
msgTarget: 'under'
},
items:[{
xtype:'fieldset',
title:'用户信息', //外框的title
collapsible:true,
autoHeight:true,
autoWidth:true,
defaults:{width:150,allowBlank:false,xtype:'textfield'},//提取共同属性
items: [{
xtype: 'textfield',
name: 'textfield1',
fieldLabel: '必须输入',
//不允许为空验证
allowBlank: false //1
}, {
xtype: 'textfield',
name: 'textfield2',
fieldLabel: '最多两个字符',
//输入的字符长度验证（至少输入2个字符）
minLength: 2 //2
}, {
xtype: 'textfield',
name: 'textfield3',
fieldLabel: '最长5个字符',
//输入的字符长度验证（最多输入2个字符）
maxLength: 5 //3
}, {
xtype: 'textfield',
name: 'textfield7',
fieldLabel: '正则表达式验证电话号码',
//通过正则表达式验证
regex: /^\d{3}-\d{3}-\d{4}$/, //4
regexText: 'Must be in the format xxx-xxx-xxxx'
}, {
xtype: 'textfield',
name: 'textfield4',
fieldLabel: '验证用户输入的是否为email',
//已经定义好的验证，请通过文档查看vtype
vtype: 'email' //5
}, {
xtype: 'textfield',
name: 'textfield6',
fieldLabel: '验证用户输入的是否是URL',
vtype: 'url' //8
}]
}],
buttons:[{text:"确定",handler:function(){
//获取按钮的父表单
var form=this.up("form").getForm();
//alert(form);
if(form.isValid()) //判断是否通过验证
{
//获取页面的表单转化为dom对象后提交
Ext.get("panel22").dom.submit();
//获取页面的表单元素后提交
};
}
},{text:"取消",handler:reset}],
buttonAlign:'center'
});
// function logins(){
// alert("aaaaa");
// MyformPanel.form.submit();//提交
// //alert("sdha");
// }
function reset(){
MyformPanel.form.reset();//取消
//alert("取消");
}
});

效果图：

2.页面弹出表单提交数据

showform.js文件：

[javascript] view plaincopy

Ext.onReady(function(){
//所有的操作定义在函数showform中
var showform=function(){
var add_winForm = Ext.create('Ext.form.Panel', {
frame: true, //frame属性
//title: 'Form Fields',
width: 340,
bodyPadding:5,
//renderTo:"panel21",
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items: [{
//隐藏的文本框
xtype: 'hiddenfield', //1
name: 'hiddenfield1',
value: '隐藏的文本框'
}, {
//显示文本框，相当于label
xtype: 'displayfield', //2
name: 'displayfield1',
fieldLabel: 'Display field',
value: '显示文本框'
}, {
//输入文本框
xtype: 'textfield', //3
name: 'textfield1',
fieldLabel: 'Text field',
//value: '输入文本框',
allowBlank: false,
emptyText:'陈建强',
blankText:"提示"
}, {
//输入密码的文本框，输入的字符都会展现为.
xtype: 'textfield', //4
name: 'password1',
inputType: 'password',
fieldLabel: 'Password field'
}, {
//多行文本输入框
xtype: 'textareafield', //5
name: 'textarea1',
fieldLabel: 'TextArea',
id:"areaid",
value: '啦啦啦，我是卖报的小行家'
}, {
//上传文件文本框
xtype: 'filefield', //6
name: 'file1',
fieldLabel: 'File upload'
}, {
//时间文本框
xtype: 'timefield', //7
name: 'time1',
fieldLabel: 'Time Field',
minValue: '8:00 AM',
maxValue: '5:00 PM',
increment: 30
}, {
//日期文本框
xtype: 'datefield', //8
name: 'date1',
fieldLabel: 'Date Field',
value: new Date()
}, {
//下拉列表框
xtype: 'combobox', //9
fieldLabel: 'Combobox',
displayField: 'name',
store: Ext.create('Ext.data.Store', {
fields: [
{ type: 'string', name: 'name' }
],
data: [
{ "name": "Alabama" },
{ "name": "Alaska" },
{ "name": "Arizona" },
{ "name": "Arkansas" },
{ "name": "California" }
]
}),
queryMode: 'local',
typeAhead: true
}, {
//只能输入数字的文本框
xtype: 'numberfield',
name: 'numberfield1', //10
fieldLabel: 'Number field',
value: 20,
minValue: 0,
maxValue: 50
}, {
//复选框
xtype: 'checkboxfield', //11
name: 'checkbox1',
fieldLabel: 'Checkbox',
boxLabel: '复选框'
}, {
//单选框，注意name和下面的单选框相同
xtype: 'radiofield', //12
name: 'radio1',
value: 'radiovalue1',
fieldLabel: 'Radio buttons',
boxLabel: 'radio 1'
}, {
//单选框，注意name和上面的单选框相同
xtype: 'radiofield', //13
name: 'radio1',
value: 'radiovalue2',
fieldLabel: '',
labelSeparator: '',
hideEmptyLabel: false,
boxLabel: 'radio 2'
}, {
//拖动组件
xtype: 'multislider', //14
fieldLabel: 'Multi Slider',
values: [25, 50, 75],
increment: 5,
minValue: 0,
maxValue: 100
}, {
//拖动组件
xtype: 'sliderfield', //15
fieldLabel: 'Single Slider',
value: 50,
increment: 10,
minValue: 0,
maxValue: 100
}]
// ,
// buttons:[{text:"确定",handler:function(){
// varform1=this.up("form").getForm();
// //alert(form1);
// Ext.get("panel21").dom.submit();
// }},{text:"取消",handler:function(){alert("事件！");}}],
// buttonAlign:'center'
});
//alert(add_winForm);
//创建window面板，表单面板是依托window面板显示的
var syswin = Ext.create('Ext.window.Window',{
title : "新建属性",
width : 350,
//height : 120,
//plain : true,
iconCls : "addicon",
// 不可以随意改变大小
resizable : false,
// 是否可以拖动
// draggable:false,
collapsible : true, // 允许缩放条
closeAction : 'close',
closable : true,
// 弹出模态窗体
modal : 'true',
buttonAlign : "center",
bodyStyle : "padding:0 0 0 0",
items : [add_winForm],
buttons : [{
text : "保存",
minWidth : 70,
handler : function() {
if (add_winForm.getForm().isValid()) {
add_winForm.getForm().submit({
url :'testshowform.jsp',
//等待时显示等待
waitTitle: '请稍等...',
waitMsg: '正在提交信息...',
params: {
t: "add"
},
success: function(fp, o) {
//alert(o);success函数，成功提交后，根据返回信息判断情况
if (o.result== true) {
Ext.MessageBox.alert("信息提示","保存成功!");
syswin.close(); //关闭窗口
// Store1.reload();
}else {
msg('信息提示', '添加时出现异常！');
}
},
failure: function() {
msg('信息提示', '添加失败！');
}
});
}
}
}, {
text : "关闭",
minWidth : 70,
handler : function() {
syswin.close();
}
}]
});
syswin.show();
};
showform(); //调用showform显示整个包含表单面板的window面板
});

Testshowform.jsp页面：

[html] view plaincopy

<%System.out.println("提交到了测试页面");%>
<%out.println("true"); %> //返回的“true”在success中的函数o.result中接收到的

效果截图：

提交过程效果图：

0 0