Ext Js 3.2的一个FormPanel的综合应用

来源：互联网发布：php伪造来路编辑：程序博客网时间：2024/05/18 00:18
1：程序代码
<%@ 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%>">        <title>formPanel</title>    <meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link><script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script><script type="text/javascript" src="ext3.2/ext-all.js"></script><script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script><script type="text/javascript">  Ext.onReady(function() {var loginform = new Ext.form.FormPanel({title: '录入信息',width: 650,autoHeight: true,frame: true,renderTo: 'form1',labelWidth: 65,labelAlign: 'right',standardSubmit: true,    //是否提交表单url: 'doForms.jsp',   method: 'post',items: [{layout: 'column',items: [{    //第一行columnWidth: .3,layout: 'form',items: [{    xtype: 'textfield',    allowBlank: false,    fieldLabel: '姓',    name: 'firstName',    id: 'firstName',    width: 120}]}, {columnWidth: .3,layout: 'form',items: [{    xtype: 'textfield',    allowBlank: false,    fieldLabel: '名',    width: 120}]}, {   columnWidth: .3,layout: 'form',items: [{    xtype: 'textfield',    allowBlank: false,    fieldLabel: '英文名字',    width: 120}]}]}, {    //第二行layout: 'column',items: [{layout: 'form',items: [{xtype: 'textfield',fieldLabel: '座右铭',width: 500}]}]}, {   //第三行  layout: 'column',  items: [{    columnWidth: .5,  layout: 'form',  items: [{  xtype: 'datefield',  format: 'Y-m-d',  allowBlank: false,  fieldLabel: '获奖日期',  width: 180  }]  }, {    columnWidth: .5,  layout: 'form',  items: [{     xtype: 'numberfield',     fieldLabel: '获奖数目',     width: 180  }]  }]}, {   //第四行   xtype: 'textarea',   fieldLabel: '奖励',   width: 500}, {   //第五行   xtype: 'fieldset',    title: '明星最爱',   autoHeight: true,   width: 570,   defaultType: 'checkbox',   hideLabels: true,   items: [{   boxLabel: '周杰伦',   checked: true,   inputValue: '1'   }, {   boxLabel: '谢霆锋',   inputValue: '2'   }, {   boxLabel: '威尔史密斯',   inputValue: '3'   }, {   boxLabel: '尼古拉斯凯奇',   inputValue: '4'   }]}, {   //第六行   layout: 'form',   items: [{   xtype: 'htmleditor',            enableColors: false,            enableAlignments: false,            fieldLabel: '获奖文章',            height: 150,            value: '好好学习ext js'   }]}],buttonAlign: 'center',     //定义button的对齐方式buttons: [{   text: '提交',   handler: function() {      Ext.Msg.alert('提交啦', '提交');      if(!loginForm.getForm().isValid()) return;      loginform.getForm().submit({         success: function() {            Ext.Msg.alert('成功', '提交成功');         },          failure: function() {            Ext.Msg.alert('失败', '提交失败');         }      });   }}, {   text:'重置',   handler: function() {    alert('aaa');      loginform.getForm().reset();   }}]});});</script>  </head>    <body>    <div id="form1"> </div>  </body></html>
2：程序效果图