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

最新推荐文章于 2021-08-05 12:42:59 发布

小昌

最新推荐文章于 2021-08-05 12:42:59 发布

阅读量1.1k

点赞数 1

分类专栏： EXT 文章标签： ext function layout string html email

本文链接：https://blog.csdn.net/chengchanglun/article/details/7686422

版权

EXT 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

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);
%>