<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <!-- Ext表单Demo --><script src="js/ext-all.js"></script><link href="css/ext-theme-gray-all.css" type="text/css" rel="stylesheet" /><script type="text/javascript">Ext.onReady(function() {var states = Ext.create('Ext.data.Store', { fields: ['abbr', 'name'], data : [ {"abbr":"AL", "name":"Alabama"}, {"abbr":"AK", "name":"Alaska"}, {"abbr":"AZ", "name":"Arizona"} ]});Ext.create('Ext.form.Panel', { title: 'Ext 表单', bodyPadding: 5, width: 350, // The form will submit an AJAX request to this URL when submitted url: 'UserAction_addMessage.action', // Fields will be arranged vertically, stretched to full width layout: 'anchor', defaults: { anchor: '100%' }, draggable:true,//允许拖动 // The fields defaultType: 'textfield', items: [{ fieldLabel: '用户名', name: 'username', //disabled:true, allowBlank: false,/* 是否允许为空,默认为false */ emptyText:'Hello Ext',/*空表单填入的提示信息*/ blankText:'不能为空！'/*文本框为空时的提示 */ },{ fieldLabel: '密码', name: 'password', allowBlank: false, blankText:'不能为空！' },{ fieldLabel: '邮箱', name: 'email', allowBlank: false, blankText:'不能为空！', vtype:'email',/* 表单内容的类型 alpha/alphanum/email/url*/ vtypeText:'不是正确的邮箱格式！'/* 不符合类型的提示信息 */ },{/* 时间 */ xtype: 'timefield', name: 'timeinday', fieldLabel: '时间', minValue: '6:00 AM', maxValue: '8:00 PM', increment: 30,/* 增量 */ anchor: '100%',/* 表单宽度 */ allowBlank: false },{/* 内容区 */ fieldLabel: '详细内容', xtype : 'textareafield', grow : true, name : 'message', anchor : '100%' }, {/* 日期 */ xtype: 'datefield', anchor: '100%', fieldLabel: '日期', name: 'time', format: 'Y/m/d|h:m:s', value: new Date() // defaults to today },{/* 数值文本框 */ xtype: 'numberfield', anchor: '100%', name: 'bottles', fieldLabel: '金额', value:100, step: 2,/* 步长 */ maxValue: 100, minValue: 0 },{/* 单选按钮 */ xtype: 'fieldcontainer', defaultType: 'radiofield', layout: 'hbox', fieldLabel: '性别', items: [ { boxLabel : '男', name : 'sex', inputValue: '男', id : 'radio1', checked:true }, { boxLabel : '女', name : 'sex', inputValue: '女', id : 'radio2' }] },{/* html编辑器 */ xtype: 'htmleditor', enableColors: true,/* 开启颜色控制，其余的开启详细见API */ enableAlignments:true,/* Enable the left, center, right alignment buttons 默认为true */ fontFamilies:['Courier New', 'Times New Roman','微软雅黑','宋体','华文新魏'],/* 设置字体 */ name:'html' }, {/* 多选按钮 */ xtype: 'fieldcontainer', fieldLabel: '多选', defaultType: 'checkboxfield', name:'feel', layout: 'hbox', items: [ { boxLabel : '中', name : 'feel', inputValue: '中', id : 'checkbox1' }, { boxLabel : '不中', name : 'feel', inputValue: '不中', checked : true, id : 'checkbox2' }, { boxLabel : '无所谓', name : 'feel', inputValue: '无所谓', id : 'checkbox3' } ] },{/* 下拉框 */ xtype: 'combo', fieldLabel: '下拉框', store: states, queryMode: 'local', displayField: 'name',/* 显示的候选项 */ valueField: 'abbr',/* 提交的表单值 */ name:'slect' }], // Reset and Submit buttons buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '提交', formBind: true, //当表单检验有效时才能启用绑定(默认为false) disabled: true, //表单检验有效时会变为false handler: function() { var form = this.up('form').getForm(); if (form.isValid()) { form.submit({ waitMsg :'正在提交...', waitTitle:'温馨提示', success: function(form, a) { /* a是一个Object,其中a.result包含action返回的json字符串 a.result.x(x即为返回的字符串的名字) */ Ext.Msg.alert('Success', a.result.showMessage); }, failure: function(form, a) { Ext.Msg.alert('Failed', a.result.showMessage); } }); } } }], renderTo : Ext.DomQuery.selectNode("div[@id='Form']")});});</script></head><body><br><div id="Form" style="margin-left: 100px;"></div><br></body></html>
