`

Ext提交

阅读更多
/**
 * 不带验证码的登录框
 */
Ext.onReady(function() {

	// 使用表单提示
	Ext.QuickTips.init();

	// turn on validation errors beside the field globally
	Ext.form.Field.prototype.msgTarget = "side";

	// 定义一个输入表单
	var simple = new Ext.FormPanel({
		baseCls : "x-plain",
		defaultType : "textfield",
		buttonAlign : 'center',
		layout:'table',
        layoutConfig: {columns:3},
		items : [{
					xtype : 'label',
					html : '<span style="font-size:12px;line-height:30px;">帐&nbsp;&nbsp;&nbsp;号:</span>',
					width: 45,
					colspan:1
				},{
					name : "user.loginName",
					allowBlank : false,
					blankText : "帐号不能为空",
					width : 160,
					colspan: 2
				},{
					xtype : 'label',
					html : '<span style="font-size:12px;line-height:30px;">密&nbsp;&nbsp;&nbsp;码:</span>',
					width: 45,
					colspan:1
				}, {
					inputType : "password",
					name : "user.password",
					allowBlank : false,
					blankText : "密码不能为空",
					width : 160,
					colspan:2
				},{
					xtype : 'label',
					html : '<span style="font-size:12px;line-height:30px;">验证码:</span>',
					width: 45,
					colspan:1
				}, {
					name : "user.loginName",
					allowBlank : false,
					blankText : "验证码不能为空",
					width : 50,
					colspan:1
				}, {
					xtype : 'panel',
					html : '<a href="login.jsp"><img src="imgcode" alt="看不清?点击换一个"/></a>',
					colspan:1,
					width:60
				}],
		buttons : [{
			width : 50,
			text : "<span style='font-size:12px;'>登录</span>",
			type : "submit",
			handler : function() {
				if (simple.form.isValid()) {
					Ext.MessageBox.show({
								title : "请稍等",
								msg : "正在加载.....",
								progressText : "",
								width : 300,
								progress : true,
								closable : false,
								animEl : "loding"
							});
					var f = function(v) {
						return function() {
							var i = v / 11;
							Ext.MessageBox.updateProgress(i, '');
						}
					}
					for (var i = 1; i < 13; i++) {
						setTimeout(f(i), i * 150);
					}
					// 提交到服务器操作
					simple.form.doAction("submit", {
								url : "Login.action",
								method : "post",
								params : "",
								success : function(form, action) {
									document.location = 'index.jsp';
									Ext.Msg.alert("登录成功!",
											action.result.message);
								},
								failure : function(form, action) {
									Ext.Msg
											.alert('登陆失败',
													action.result.message);
								}
							});
				}
			}
		}, {
			width : 50,
			text : "<span style='font-size:12px;'>重置</span>",
			handler : function() {
				// 重置表单
				simple.form.reset();
			}
		}]
	});
	// 定义窗体
	var _window = new Ext.Window({
				title : "<span style='font-size:14px;'>用户登录</span>",
				layout : "fit",
				width : 250,
				height : 170,
				plain : true,
				bodyStyle : "padding:10px;padding-bottom:0px;",
				maximizable : false,
				resizable : false,
				closeAction : "close",
				closable : false,
				collapsible : true,
				plain : true,
				buttonAlign : "center",
				items : simple
			});
	_window.show()
});
 package com.hisoft.ems.action; import com.hisoft.ems.model.User; import com.opensymphony.xwork2.ActionSupport; public class UserAction extends ActionSupport { private static final long serialVersionUID = 1L; private boolean success; private String message; private User user; public String login() { if ("admin".equals(user.getLoginName().trim()) && "admin".equals(user.getPassword().trim())) { this.success = true; this.message = "您的帐号是"+user.getLoginName()+",密码是"+user.getPassword(); } else { this.success = false; this.message = "对不起,未授权用户不能使用本系统"; } return SUCCESS; } public boolean isSuccess() { return success; } public void setSuccess(boolean success) { this.success = success; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public User getUser() { return user; } public void setUser(User user) { this.user = user; } }

 

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

	<constant name="struts.devMode" value="true" />

	<package name="default" namespace="/" extends="json-default">
		<action name="Login" class="com.hisoft.ems.action.UserAction"
			method="login">
			<result type="json"></result>
		</action>
		<action name="List" class="com.hisoft.ems.action.ClientAction" method="list">
			<result name="success">/clientManagerList.jsp</result>
		</action>
	</package>

	<!-- Add packages here -->

</struts>

 

Morik.Office.CompanyPanel = function(config) {
	Morik.Office.CompanyPanel.superclass.constructor.call(this, config);

	// 加上服务器上的jsp数据生成
	// 生成Company类型
	var proxy = new Ext.data.HttpProxy( {
		url : 'company.jsp'
	});

	var recordType = new Ext.data.Record.create([ {
		name : "id",
		type : "int"
	}, {
		name : "comNum",
		type : "string"
	}, {
		name : "comName",
		type : "string"
	}, {
		name : "comAddress",
		type : "string"
	}]);

	// 定义分析器
	var reader = new Ext.data.JsonReader( {
		totalProperty : "results",
		root : "rows",
		id : "id"
	}, recordType);

	// 定义store
	var ds = new Ext.data.Store( {
		proxy : proxy,
		reader : reader
	});
this.ds=ds;
	// 第二,讲一下cm,grid

	var cm = new Ext.grid.ColumnModel( {
		defaultSortable : true,
		defaultWidth : 180,
		columns : [ {
			header : '编号',
			dataIndex : 'comNum'
		}, {
			header : '名称',
			dataIndex : 'comName'
		}, {
			header : '公司地址',
			width : 300,
			dataIndex : 'comAddress'
		}]
	});
var pagingBar = new Ext.PagingToolbar({
        pageSize: 10,
        store: ds,
        displayInfo: true,
        displayMsg: '共有 {2},当前显示 {0} - {1}条',
        emptyMsg: "没有数据"
    });
	var grid = new Ext.grid.GridPanel( {
		cm : cm,
		store : ds,
		width : 660,
		height : 400,
		bbar:pagingBar,
		loadMask:{msg:'正在载入数据,请稍等...'},
		title : '公司列表'
	});
	//ds.load();

	this.add(grid);
	// 第三、调整,tbar分页,工具栏
	
}
Ext.extend(Morik.Office.CompanyPanel, Ext.Panel, {});

 

分享到:
评论

相关推荐

    EXT提交服务器的三种方式

    以下是EXT提交服务器的三种方式的详细说明: 1. **EXT的Form表单AJAX提交**:这是EXT中最常见的提交方式,它允许你在不刷新整个页面的情况下与服务器进行异步通信。通过使用`doAction`方法,你可以方便地触发表单的...

    EXT提交表单,ASP.NET

    当我们讨论EXT提交表单与ASP.NET的结合时,主要涉及的是EXTJS如何与ASP.NET后端进行数据交互。EXTJS 提供了表单组件(FormPanel)来创建和处理用户输入,而ASP.NET则处理这些数据并进行业务逻辑处理或数据持久化。 ...

    EXT异步提交FORM表单

    ### EXT异步提交FORM表单知识点详解 #### 一、EXT异步提交FORM表单概述 在现代Web应用开发中,异步提交表单是一种常见的技术手段,它能够提升用户体验,减少页面刷新带来的数据丢失风险,并能有效提高系统的响应...

    Ext 操作数据库,对数据的增删改查,包括数据库,Ajax请求和store请求的设置

    在IT领域,Ext是一个强大的JavaScript库,主要用于构建富客户端应用程序,尤其在Web应用开发中有着广泛的应用。这个压缩包文件“ExtProject”显然是一个基于Ext框架的项目,它涵盖了数据库操作、Ajax请求以及Store的...

    ext 表单提交

    标题中的“ext 表单提交”指的是Ext JS框架中关于表单数据提交的功能。Ext JS是一个流行的JavaScript库,用于构建富客户端Web应用。它提供了一套完整的组件模型,包括各种UI元素,如表格、面板、表单等。在Ext JS中...

    ext_表单提交_数据校验

    ### ext_表单提交_数据校验:深入解析与实践 #### 一、文本框输入控件(Ext.form.TextField) 在Ext JS框架中,`Ext.form.TextField`是一种用于收集用户输入的基本控件,它提供了丰富的配置选项来实现数据校验。...

    Ext+JSP实现数据提交

    本篇将详细探讨如何利用`Ext`前端框架与`JSP`服务器端页面来实现数据的提交。 `Ext`是一个强大的JavaScript库,主要用于构建富客户端应用。它提供了丰富的组件库,包括表格、表单、菜单等,以及一套完整的MVC...

    EXT安装包4.2.1-1

    9. **强大的表单组件**:EXT提供了各种表单元素,支持验证、动态加载和远程提交,便于构建功能完备的在线表单。 10. **性能优化**:EXT通过延迟加载、按需渲染和组件缓存等策略,提升了大型应用的性能和加载速度。 ...

    EXT的3中提交方式

    ### EXT的三种提交方式详解 #### 一、Form提交 在EXT框架中,`form`提交是一种常见的数据提交方式,这种方式通常与HTML表单元素相结合,实现数据的有效性和完整性验证之后的数据提交。以下是对该部分代码的具体...

    ExtJs4.0 表单提交Demo

    在“ExtJs4.0 表单提交Demo”中,我们将深入探讨如何在ExtJs 4.0环境下,通过Ext Ajax模块实现表单的数据提交,同时实现显示层和控制层的分离,提升代码的可维护性和可扩展性。 1. **ExtJs 4.0 表单基础** ExtJs ...

    EXT dojochina ExtAjax表单提交 L9.rar

    Ext.Msg.alert('失败', '表单提交失败: ' + action.result.message); } }); } else { Ext.Msg.alert('警告', '请检查表单数据!'); } } }] }); ``` 在这个例子中,当用户点击提交按钮时,会触发`handler`...

    Ext-2.1 Ext 2全文档

    它们提供了创建和管理HTML表单的能力,支持各种输入类型、验证规则以及数据提交。Ext Form还包含了自定义表单字段、联动控制等高级特性。 对于数据管理,Ext 2.1提供了Store对象,它可以存储和管理数据,与服务器...

    ext2.0项目源代码供大家学习ext使用

    7. **FormPanel**:用于创建表单,支持各种表单元素,并能进行验证和数据提交。 8. **Drag and Drop**:EXT支持拖放操作,允许用户通过鼠标拖动组件或数据。 9. **Ext Designer支持**:EXT 2.0可能还支持EXT ...

    Ext框架开发文档及ext-core.js

    5. **表单(Forms)**:EXT提供了丰富的表单组件和表单处理功能,如文本框、下拉框、复选框等,以及表单验证和提交机制。 6. **工具栏(Toolbars)**:EXT的工具栏组件可以轻松添加各种按钮、菜单和分割线,为用户...

    Ext_2.2_API(chinese).rar_Ext 2.2 API_ext js 2_ext-2.2 api_ext2.2

    此外,`Ext.form.FormPanel`和相关组件允许创建复杂的表单,支持验证和数据提交。拖放功能允许用户通过简单的拖动操作来交互,增强了用户体验。还有许多其他工具类,如`Ext.util.Format`,提供了一系列实用的格式化...

    Ext3.2的Ext.data.Store类和Ext.Ajax类的实际运用

    其中,我们可以看到Ext.Ajax可以实现动态与静态的方式提交到web服务器。从中可以看出,其实Ext框架可以非常方便的与现有网站集成。关于Ext.data.Store类,我们可以看出:该框架提供了客户端缓存的功能--这对于我们...

    Ext 添加功能form表单实例

    根据给定的信息,本文将详细解释“Ext 添加功能form表单实例”的知识点,这主要针对Ext初学者。本文会从创建表单、字段定义、验证规则以及提交逻辑等方面进行深入探讨。 ### Ext 添加功能form表单实例 #### 表单...

    EXT3.0 登录实例

    EXT3.0是一种基于JavaScript的富互联网应用程序(RIA)框架,专用于构建功能强大的桌面级Web应用程序。EXT3.0登录实例是EXT框架中的一个基础应用案例,它展示了如何使用EXT库来创建用户认证系统,这在Web开发中是至...

    ext form 表单提交数据的方法小结

    本文主要总结了EXT表单提交数据的三种常见方法:EXT的form表单AJAX提交、非AJAX提交以及EXT的Ajax类直接提交。 1. EXT的form表单AJAX提交(默认提交方式) EXT的form表单默认采用AJAX方式进行数据提交,这样可以在...

    ext-4.0.7压缩包

    4. **Form Components**:EXT提供了丰富多样的表单组件,如文本框、下拉框、日期选择器等,支持验证和远程提交,使得创建交互式表单变得简单。 5. **Ajax通信**:EXT内置了Ajax处理机制,通过`Ext.Ajax`对象可以...

Global site tag (gtag.js) - Google Analytics