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

最新推荐文章于 2018-04-08 16:48:43 发布
最新推荐文章于 2018-04-08 16:48:43 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： EXT 文章标签： ext function layout string html email
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chengchanglun/article/details/7686422
版权

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

 
 

 

小昌
关注
专栏目录
ext form 表单提交数据的方法小结
09-06
本文主要总结了EXT表单提交数据的三种常见方法：EXT的form表单AJAX提交、非AJAX提交以及EXT的Ajax类直接提交。 1. EXT的form表单AJAX提交（默认提交方式） EXT的form表单默认采用AJAX方式进行数据提交，这样可以在...
Ext 表单布局实例代码
09-06
在EXT JS这个强大的JavaScript框架中，表单布局是构建用户界面时一个非常重要的组成部分。EXT JS提供了多种布局方式，使得开发者可以灵活地设计和组织表单元素。在提供的代码实例中，我们看到了一个基于EXT JS的表单...
JavaScript EXT 创建一个 form 表单并提交
qq_29663071的博客
03-15 908
页面布局有些复杂的情况下，可能需要在页面中动态创建一个 form，JavaScript 创建 form 演示如下：   [javascript] view plain copy // JavaScript 构建一个 form    function MakeForm()  {        // 创建一个 form      var form1 = document
Ext 异步提交文件
LEE_ZCF
12-13 747
开发中用到struts1 + spring 的框架配置. 前台的form表单如下：             action="/pharmacy/drugstoragesale.do?method=saleFileDataimport"             enctype="MULTIPART/FORM-DATA" styleId="storgedataform">
Ext JS表单Ext.form.FormPanel
Coco5419的博客
11-05 496
1、表单 对于传统的b/s应用来说，数据录入元素是放在表单<form>标签里面的。而对于ExtJS应用来说，则可以直接使用FormPanel控件来存放表单中的元素。FormPanel继承自Panel，在Panel的基础上提供与表单相关的各种特性，比如可以指定表单提交的url、指定表单提交方式、是否是二进制提交等；另外FormPanel固定使用form布局，前面关于布局一节中...
Ext中Form组件提交后台的3种方式
weixin_34235135的博客
09-07 346
2019独角兽企业重金招聘Python工程师标准>>> ...
ExtJs开发教程_001_Ext.data.Store使用方法详解
九门宁生
02-27 393
这个组件继承自Ext.data.AbstractStore 本篇讲解了如何构造并且做一些基本使用下面是他的属性列表[java] view plain copyautoLoad //是否自动加载  autoSync//是否自动同步  buffered//允许缓冲（官方有个5000条数据的例子可以参看）  clearOnPageLoad//是否在加载新数据的时候清空旧数据  clearRemovedO...
EXT异步提交FORM表单
08-18
### EXT异步提交FORM表单知识点详解 #### 一、EXT异步提交FORM表单概述 在现代Web应用开发中，异步提交表单是一种常见的技术手段，它能够提升用户体验，减少页面刷新带来的数据丢失风险，并能有效提高系统的响应...
EXT2_combobox_form.rar_combobox ext_ext
09-20
EXT2_combobox_form.rar_combobox ext_ext 这个标题暗示我们关注的是一个与EXT2相关的项目，其中包含了关于form表单和combobox的示例。EXT是一个流行的JavaScript库，主要用于构建富客户端应用，特别是Web应用的用户...
Ext学习 form表单的提交方法
dahuil1986的专栏
05-28 168
[size=large][color=darkred]简单的ext form表单提交，验证，和服务器回传数据[/color][/size] 最近自己学了点ext方面的知识，做了一个简单的form表单和Struts集成。感觉从中学到了很多。想把自己的心得写出来和大家分享。 [size=small][color=darkred][b]1 首先来看前台的页面代码：[/b][/color][/...
ExtJS4学习笔记五－－面板使用
逸雨涵梦的专栏
08-21 1787
标准面板：  Javascript代码   Ext.create('Ext.panel.Panel',{               title:'面板头部（header）',               tbar : ['顶端工具栏(top toolbars)'],               bbar : ['底端工具栏(bottom toolbars)'],
ExtJS面板与布局
HOKING的专栏
12-05 4704
本例演示版为ext-4.2.1 面板（Panel）         ExtJS不但在Web开发中成功引入了丰富的组件，也引入了桌面程序中常用到的面板和布局概念。这些概念的引入在很大程度上改变了传统的Web开发方式。 面板（panel）是ExtJS中一个很重要的概念，它相当于一幅画板，我们可以在它的上面放置需要的各种组件，并使用不同的布局类对组件的摆放位置进行格式化，掌握这些布局类的特点及使用
Ext中多个form组件放一行的布置
licip的专栏
12-24 3507
ext中把from表单中的多个组件放到一行的布置方式如下所示：var form = new Ext.FormPanel({     id:typeForm,     renderTo:center-div1,   frame: true,   height: 80,     labelWidth: 50,      title: 类型查询,         items: [{   
【原】基础篇:第九篇,Ext组件系列之--field组件的基本用法
weixin_30455661的博客
06-05 184
本章介绍Ext.form.Field组件的基本用法: <form id="form1" runat="server"> <div> <div id="Bind_Field"></div> <script type="text/javascript"> //这里是把Field很重要的属性列出来　实际在应用的时候不需...
Extjs--12种布局方式
weixin_30755709的博客
09-29 686
按照Extjs的4.1的文档来看，extjs的布局方式大致有12种，下面一一介绍，有些代码就是文档中的。 1.Border 边界布局 border布局，最多可以将页面分割为“东南西北中”五部分，是最常用的一种布局方式。我们可以根据项目的实际需求保留其中的部分区域，而将其他部分隐藏掉。 1.1效果图预览 1.2 代码demo Ext....
Ext JS 容器Containers
wangchunbo的博客空间
08-25 4083
Ext JS 容器(Containers)
Extjs 布局篇-上下左右布局
wuyongde0922的专栏
04-08 4094
Ext.define('VedioDuosenApp.view.VedioView' ,{    extend: 'Ext.panel.Panel',    alias : 'widget.vedioView',    id:'vediopanel',    //title: '视频',    header : false,    autoHeight : true,    region: "we...
EXT.form组件详解：FormPanel到TriggerField
"EXT.form组件包括一系列用于构建Web应用程序表单的高级组件，如FormPanel、Checkbox、ComboBox、DateField、Field、FieldSet...此外，EXT.form组件还支持布局管理，可以与其他EXT组件结合使用，构建出复杂的用户界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值