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

最新推荐文章于 2017-07-31 14:10:37 发布

波哥的技术积累

最新推荐文章于 2017-07-31 14:10:37 发布

阅读量1.8k

点赞数

分类专栏： Ext Js 文章标签： ext layout function stylesheet string path

本文链接：https://blog.csdn.net/woshisap/article/details/6661608

版权

Ext Js 专栏收录该内容

61 篇文章 1 订阅

订阅专栏

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：程序效果图

波哥的技术积累

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
Ext Js 3.2的一个FormPanel的综合应用

1：程序代码<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getSe
复制链接

扫一扫