您当前的位置: 首页 > Web前端

EXT 篇,ext容易布局,ext form提交

发布时间：2010-05-20 14:01:29 文章来源：www.iduyao.cn 采编人员：星星草

EXT 篇,ext简单布局,ext form提交

1.ext form 提交：

<script type="text/javascript">
	Ext.onReady(function() {

		Ext.create('Ext.form.Panel', {
			title : 'Simple Form',
			id:'formPanel_1',
			bodyPadding : 5,
			width : 350,
			// The form will submit an AJAX request to this URL when submitted
			url : 'rForm.jsp',
			// Fields will be arranged vertically, stretched to full width
			layout : 'anchor',
			defaults : {
				anchor : '100%'
			},

			// The fields
			defaultType : 'textfield',
			items : [ {
				fieldLabel : 'First Name',
				name : 'first',
				allowBlank : false
			}, {
				fieldLabel : 'Last Name',
				name : 'last',
				allowBlank : false
			} ],

			// Reset and Submit buttons
			buttons : [ {
				text : 'Reset',
				handler : function() {
					this.up('form').getForm().reset();
				}
			}, {
				text : 'Submit',
				formBind : true, //only enabled once the form is valid
				disabled : true,
				handler : function() {
					var form = this.up('form').getForm();
					if (form.isValid()) {
						//Ext.MessageBox.wait('Passing information to the server, Wait.. ');  
						form.submit({
							waitMsg:'Passing information to the server, Wait..',
							success : function(form, action) {
								Ext.MessageBox.hide();
							 	Ext.getCmp('formPanel_1').hide(); 
								//Ext.Msg.alert('Success', action.result.msg);
								var array = action.result.data;
								for(var i=0;i<array.length;i++){
									alert(array[i].id + array[i].name);
								}
								
							},
							failure : function(form, action) {
								form.reset();
								Ext.MessageBox.hide();
								Ext.Msg.alert('失败！', action.result.msg);
							},
							 
						});
					}
				}
			} ],
			renderTo : Ext.getBody()
		});

	});
</script>

服务器端：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String firstName = request.getParameter("first");
	String lastName = request.getParameter("last");
	//System.out.append(firstName + "/" + lastName);
	String info = "info:'success'";
	try {
		java.lang.Thread.sleep(1000);
	} catch (Exception e) {
		e.printStackTrace();
	}

	//out.println("{ success:true,data:[{id:1, name:'A'},{id:2, name:'B'}] }");
	out.println("{ success:false,errors:[{id:1, name:'A'},{id:2, name:'B'}] }");
%>

需要提醒的是：服务器端返回的是符合json格式字符串；

下面是风格不好的开发模式，非MVC模式，感觉代码越来越多，不好收拾，建议用MVC模式，因本人是后台开发，第一次做EXT应用。期待下一次用MVC模式开发。

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<link rel="stylesheet" href="../js/ext/resources/css/ext-all.css"
	type="text/css" />
<script type="text/javascript" src="../js/ext/ext.js"></script>

<script type="text/javascript">
	Ext.require([ 'Ext.tab.*', 'Ext.window.*', 'Ext.tip.*',
			'Ext.layout.container.Border' ]);

	Ext
			.onReady(function() {

				//store
				var store = Ext.create('Ext.data.TreeStore', {

					root : {
						expanded : true,
						children : [ {
							text : "市场部门",
							expanded : true,
							children : [ {
								text : "销售部门",
								id : 'sales_',
								title : 'title',
								leaf : true,

							}, {
								text : "售后服务部门",
								leaf : true,
								id : 'NBRMA_',
								loaded : true
							} ]
						}, {
							text : "技术部门",
							expanded : true,
							children : [ {
								text : "需求分析部门",
								id : 'demand_analysis_',
								leaf : true
							}, {
								text : "编码部门",
								id : 'coder_',
								leaf : true

							} ]
						}, {
							text : "财务部门",
							id : 'treasurer_',
							leaf : true
						} ]
					}
				});

				var viewPort = Ext
						.create(
								'Ext.Viewport',
								{

									closable : true,
									closeAction : 'hide',
									enableTabScroll : true,
									layout : 'border',
									bodyStyle : 'padding: 1px;',
									items : [
											{
												region : 'north',
												id : 'window-top',
												contentEl : 'applyto'//替换
											},
											{
												region : 'west',
												xtype : 'treepanel',
												title : 'Simple Tree',
												width : 200,
												height : 150,
												store : store,
												rootVisible : false,
												store : store,
												listeners : {
													itemclick : function(view,
															record, item,
															index, e, eOpts) {//view: 视图,record:叶子节点,item: , e: , eOpts:配置,

														var pre_name = record
																.get('id');

														Ext
																.create(
																		//create store
																		'Ext.data.Store',
																		{
																			storeId : 'simpsonsStore',
																			pageSize : 3,

																			fields : [
																					'name',
																					'email',
																					'phone' ],

																			proxy : {
																				type : 'ajax',
																				url : 'data.jsp',

																				reader : {
																					type : 'json',
																					root : 'items'
																				}
																			},
																			autoLoad : true
																		});

														var paging = Ext
																.create(
																		"Ext.toolbar.Paging",
																		{
																			store : Ext.data.StoreManager
																					.lookup('simpsonsStore'),
																			displayInfo : true,
																			displayMsg : "第 {0} - {1} 项, 共{2}项",
																			beforePageText : "第",
																			afterPageText : "共{0}页"
																		});

														var grid = Ext
																.create(
																		'Ext.grid.Panel',
																		{
																			title : record
																					.get('text'),
																			closable : true,
																			closeAction : 'hide',
																			xtype : 'grid',
																			store : Ext.data.StoreManager
																					.lookup('simpsonsStore'),
																			columns : [
																					{
																						header : 'Name',
																						dataIndex : 'name',
																						flex : 1
																					},
																					{
																						header : 'Email',
																						dataIndex : 'email',
																						flex : 1
																					},
																					{
																						header : 'Phone',
																						dataIndex : 'phone',
																						flex : 2
																					} ],
																			bbar : paging

																		});

														var btn_bogus = Ext
																.getCmp(pre_name
																		+ 'department');

														btn_bogus.removeAll();
														btn_bogus.add(grid);
														btn_bogus.show();
														
													}
												}
											},
											{
												region : 'center',
												xtype : 'tabpanel',
												id : 'center',
												frame : true,
												autoScroll : true,
												activeTab : 0,
												items : [
														{
															title : 'Bogus Tab1',
															html : 'Hello world 1',
															id : 'sales_department',
															layout : 'fit',
															closable : true,
															hidden : true,
															closeAction : 'hide'
														},
														{
															title : 'Another Tab2',
															html : 'Hello world 2',
															id : 'NBRMA_department',
															layout : 'fit',
															hidden : true,
															closable : true,
															closeAction : 'hide'
														},
														{
															id : 'demand_analysis_department',
															layout : 'fit',
															title : 'Closable Tab3',
															html : 'Hello world 3',
															hidden : true,
															closable : true,
															closeAction : 'hide'
														},
														{
															id : 'coder_department',
															layout : 'fit',
															title : 'Closable Tab4',
															html : 'Hello world 4',
															hidden : true,
															closable : true,
															closeAction : 'hide'
														},
														{
															id : 'treasurer_department',
															layout : 'fit',
															title : 'Closable Tab5',
															html : 'Hello world 5',
															hidden : true,
															closable : true,
															closeAction : 'hide'
														} ]
											},
											{
												region : 'south',
												title : 'Footer',
												height : 100,
												split : true,
												collapsible : true,
												html : '<h1 class="x-panel-header">Page Title</h1>',
												autoHeight : true,
												floatable : false,
												items : [ {
													title : 'butttt',
													width : 200,
													listeners : {
														click : {
															element : 'el', //bind to the underlying el property on the panel

															fn : function() {
																
																Ext.Ajax
																		.request({
																			url : 'response.jsp',//the same path
																			params : {
																				id : 1,
																				name : 'chengchang lun '
																			},
																			success : function(
																					response) {
																				var text = response.responseText;
																				Ext.Msg
																						.alert(text);
																			},
																			failure : function(
																					error) {
																				Ext.Msg
																						.alert(error)
																			}
																		});

															}
														}
													}
												//listeners
												} ]
											} ],

								});

				viewPort.show(100);
			});
</script>
<title>Insert title here</title>
</head>
<body>

	<script type="text/javascript">
		Ext
				.getBody()
				.mask(
						"<span style='font:normal normal bold 19px Arial;color:#4B8DF9'>loding...</span>");
		setTimeout(function() {
			Ext.getBody().unmask();
		}, 1000);
	</script>

	<div style="display: none;">
		<div id="applyto"
			style='background: #889667; color: White; text-align: center; height: 80px'>
			<marquee>
				<h1>大连民族学院后台管理系统</h1>
			</marquee>
		</div>
	</div>
</body>
</html>

response.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String pid = request.getParameter("id");
	String pname = request.getParameter("name").trim();
	out.println("from jsp server response  " + "id:" + pid + " name: "
			+ pname);
%>

data.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String json = "{ items: [ {'name': 'Lisa','email': 'lisa@simpsons.com', 'phone': '555-111-1224'},"
			+ "{'name': 'Bart','email': 'bart@simpsons.com','phone': '555-222-1234' },"
			+ "{'name': 'Bart','email': 'bart@simpsons.com','phone': '555-222-1234' }],"
			+ "success: true,total: 101}";

	out.append(json);
%>

友情提示：
信息收集于互联网，如果您发现错误或造成侵权，请及时通知本站更正或删除，具体联系方式见页面底部联系我们，谢谢。

其他相似内容：

[Tomcat]org.apache.catalina.loader.WebappClassLoaderBase.Illegal access

[Tomcat]org.apache.catalina.loader.WebappClassLoaderBase...Illegal access 问题描述：发现Tomcat报了一个异常： org.apache...
npm装配node-sass失败的解决

npm安装node-sass失败的解决安装这东西的时候会出现依懒pyathon2.7，必须是2.7其它版本还不行，然后还要依懒visual studio（安装...
#DEFINE函数返回值宏定义函数替代INLINE函数

#DEFINE函数返回值宏定义函数代替INLINE函数腐尸将军双眼血红嘶吼一声挥舞着长柄战斧就冲了上来遥遥的就劈了下来火光一盛赫...
找到OData service出错根源的小技巧

找出OData service出错根源的小技巧 SAP的Fiori应用是通过OData和后台交互的。在使用Fiori应用时您可能会遇到这样的错误消息...
TabIndex 属性 Tabindex="1" 与Tabindex="0"随便数字

TabIndex 属性 Tabindex="-1" 与Tabindex="0"、任意数字当使用键盘时，tabindex是个关键因素，它用来定位html元素。 tabind...
分享12款令人目瞪口呆的WebVR演示和实验效果

分享12款令人瞠目结舌的WebVR演示和实验效果不管你信不信， WebVR绝对是浏览器下一个让你激动的技术方向，也许很快你就可以使...
03 调整IDEA+Maven+SSM框架的高并发的商品秒杀项目之web层

03 整合IDEA+Maven+SSM框架的高并发的商品秒杀项目之web层 Github：https://github.com/nnngu项目源代码：https://github.com/nn...
chrome 忽略https不安全提醒配置

chrome 忽略https不安全提示配置 "C:Program Files (x86)GoogleChromeApplicationchrome.exe" --disable-infobars --ignore-...
全屏滚动插件fullPage课程详解

全屏滚动插件fullPage教程详解【前言】之前介绍了全屏滚动插件 fullPage.js，也用该插件制作了一些例子。今天介绍另一款...
数目字转罗马数字

数字转罗马数字 function convert(num) { var nums = [1000,900,500,400,100,90,50,40,10,9,5,4,1]; var romans =["m",...

EXT 篇,ext容易布局,ext form提交

其他相似内容：

热门推荐：