1.表单提交
代码:
form.jsp页面:
<formid="panel22"action="getTest.jsp"method="post"></form>
form.js:
- //创建表单面板
- 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文件:
- 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页面:
- <%System.out.println("提交到了测试页面");%>
- <%out.println("true"); %> //返回的“true”在success中的函数o.result中接收到的
效果截图:
提交过程效果图: