Ext Js 3.2的一个FormPanel的综合应用
2011-08-05 00:46
295 查看
1:程序代码
2:程序效果图
<%@ 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:程序效果图
相关文章推荐
- 综合应用WPF/WCF/WF/LINQ之三十九:实现一个简单的DataGrid之获取某格的原始(或当前)行(或列)的Index
- Ext Js 3.2 柱状栈图的应用
- 企业库综合应用的一个小sample
- 文理综合:应用语言学确实是一个神奇的专业
- linux基础服务的一个小综合应用
- 综合应用WPF/WCF/WF/LINQ之二十五:使用CustomControl技术编写一个翻页控件
- 综合应用WPF/WCF/WF/LINQ之四十:实现一个简单的DataGrid之CheckBox已勾选的项的保存
- Ext Js 3.2 饼状图应用
- 我记录综合系统学习研究之用户管理五(如何利用wojilu打造一个全新的SNS应用)
- 综合应用WPF/WCF/WF/LINQ之二十四:使用UserControl技术编写一个翻页控件
- 自定义View之点 线 面以及绘制一个综合应用时钟
- Ext Js 3.2 柱状图应用
- Ext Js3.2 折线图应用
- 一个应用单链表基本算法的综合程序
- 综合应用WPF/WCF/WF/LINQ之四:创建一个StateMachineWorkflow 推荐
- 综合应用:一个《购票系统》项目需求分析
- C++ 容器的综合应用的一个简单实例——文本查询程序
- Ext Js 3.2 表格应用复选框
- 综合应用WPF/WCF/WF/LINQ之三十六:实现一个完全封装的SortableListView控件
- 第四周【项目3.2-单链表应用(多文件)把一个链表接到另一个后面】