/**
* 不带验证码的登录框
*/
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;">帐 号:</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;">密 码:</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提交服务器的三种方式的详细说明: 1. **EXT的Form表单AJAX提交**:这是EXT中最常见的提交方式,它允许你在不刷新整个页面的情况下与服务器进行异步通信。通过使用`doAction`方法,你可以方便地触发表单的...
当我们讨论EXT提交表单与ASP.NET的结合时,主要涉及的是EXTJS如何与ASP.NET后端进行数据交互。EXTJS 提供了表单组件(FormPanel)来创建和处理用户输入,而ASP.NET则处理这些数据并进行业务逻辑处理或数据持久化。 ...
### EXT异步提交FORM表单知识点详解 #### 一、EXT异步提交FORM表单概述 在现代Web应用开发中,异步提交表单是一种常见的技术手段,它能够提升用户体验,减少页面刷新带来的数据丢失风险,并能有效提高系统的响应...
在IT领域,Ext是一个强大的JavaScript库,主要用于构建富客户端应用程序,尤其在Web应用开发中有着广泛的应用。这个压缩包文件“ExtProject”显然是一个基于Ext框架的项目,它涵盖了数据库操作、Ajax请求以及Store的...
标题中的“ext 表单提交”指的是Ext JS框架中关于表单数据提交的功能。Ext JS是一个流行的JavaScript库,用于构建富客户端Web应用。它提供了一套完整的组件模型,包括各种UI元素,如表格、面板、表单等。在Ext JS中...
### ext_表单提交_数据校验:深入解析与实践 #### 一、文本框输入控件(Ext.form.TextField) 在Ext JS框架中,`Ext.form.TextField`是一种用于收集用户输入的基本控件,它提供了丰富的配置选项来实现数据校验。...
本篇将详细探讨如何利用`Ext`前端框架与`JSP`服务器端页面来实现数据的提交。 `Ext`是一个强大的JavaScript库,主要用于构建富客户端应用。它提供了丰富的组件库,包括表格、表单、菜单等,以及一套完整的MVC...
9. **强大的表单组件**:EXT提供了各种表单元素,支持验证、动态加载和远程提交,便于构建功能完备的在线表单。 10. **性能优化**:EXT通过延迟加载、按需渲染和组件缓存等策略,提升了大型应用的性能和加载速度。 ...
### EXT的三种提交方式详解 #### 一、Form提交 在EXT框架中,`form`提交是一种常见的数据提交方式,这种方式通常与HTML表单元素相结合,实现数据的有效性和完整性验证之后的数据提交。以下是对该部分代码的具体...
在“ExtJs4.0 表单提交Demo”中,我们将深入探讨如何在ExtJs 4.0环境下,通过Ext Ajax模块实现表单的数据提交,同时实现显示层和控制层的分离,提升代码的可维护性和可扩展性。 1. **ExtJs 4.0 表单基础** ExtJs ...
Ext.Msg.alert('失败', '表单提交失败: ' + action.result.message); } }); } else { Ext.Msg.alert('警告', '请检查表单数据!'); } } }] }); ``` 在这个例子中,当用户点击提交按钮时,会触发`handler`...
它们提供了创建和管理HTML表单的能力,支持各种输入类型、验证规则以及数据提交。Ext Form还包含了自定义表单字段、联动控制等高级特性。 对于数据管理,Ext 2.1提供了Store对象,它可以存储和管理数据,与服务器...
7. **FormPanel**:用于创建表单,支持各种表单元素,并能进行验证和数据提交。 8. **Drag and Drop**:EXT支持拖放操作,允许用户通过鼠标拖动组件或数据。 9. **Ext Designer支持**:EXT 2.0可能还支持EXT ...
5. **表单(Forms)**:EXT提供了丰富的表单组件和表单处理功能,如文本框、下拉框、复选框等,以及表单验证和提交机制。 6. **工具栏(Toolbars)**:EXT的工具栏组件可以轻松添加各种按钮、菜单和分割线,为用户...
此外,`Ext.form.FormPanel`和相关组件允许创建复杂的表单,支持验证和数据提交。拖放功能允许用户通过简单的拖动操作来交互,增强了用户体验。还有许多其他工具类,如`Ext.util.Format`,提供了一系列实用的格式化...
其中,我们可以看到Ext.Ajax可以实现动态与静态的方式提交到web服务器。从中可以看出,其实Ext框架可以非常方便的与现有网站集成。关于Ext.data.Store类,我们可以看出:该框架提供了客户端缓存的功能--这对于我们...
根据给定的信息,本文将详细解释“Ext 添加功能form表单实例”的知识点,这主要针对Ext初学者。本文会从创建表单、字段定义、验证规则以及提交逻辑等方面进行深入探讨。 ### Ext 添加功能form表单实例 #### 表单...
EXT3.0是一种基于JavaScript的富互联网应用程序(RIA)框架,专用于构建功能强大的桌面级Web应用程序。EXT3.0登录实例是EXT框架中的一个基础应用案例,它展示了如何使用EXT库来创建用户认证系统,这在Web开发中是至...
本文主要总结了EXT表单提交数据的三种常见方法:EXT的form表单AJAX提交、非AJAX提交以及EXT的Ajax类直接提交。 1. EXT的form表单AJAX提交(默认提交方式) EXT的form表单默认采用AJAX方式进行数据提交,这样可以在...
4. **Form Components**:EXT提供了丰富多样的表单组件,如文本框、下拉框、日期选择器等,支持验证和远程提交,使得创建交互式表单变得简单。 5. **Ajax通信**:EXT内置了Ajax处理机制,通过`Ext.Ajax`对象可以...