83.个人信息维护页面 Extjs 页面
1
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>角色</title> <meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
var username = "${user.userName}";
var updateFormPanel = new UpdateFormPanel(username);
var width = Ext.getCmp('mainTab').getActiveTab().getInnerWidth();
var height = Ext.getCmp('mainTab').getActiveTab().getInnerHeight();
var activeTab = Ext.getCmp('updateFormId');
if(activeTab){
activeTab.setWidth(width);
activeTab.setHeight(height);
}
activeTab.render('updateDiv');
</script> </head>
<body>
<div id="updateDiv" ></div>
</body>
</html>
2.
Ext.namespace("hrmsys.user.updatePwd");
var userMark1 = true;
var userMark2 = true;
var userMark3 = true;
UpdateFormPanel = Ext.extend(Ext.form.FormPanel, {
id: 'updateFormId',
constructor: function(username){
Ext.form.Field.prototype.msgTarget = 'side';
Ext.QuickTips.init();
UpdateFormPanel.superclass.constructor.call(this, {
style: 'margin-left: 30%; margin-top: 5%',
items: [{
width: 500,
xtype: 'fieldset',
title: '用户信息修改',
labelAlign: 'right',
labelWidth: 60,
layout: 'form',
padding: '10 0 0 110',
items: [{
xtype: 'textfield',
fieldLabel: '用户名',
id: 'userName',
value: username,
allowBlank: false,
name: 'user.userName',
blankText: '不能为空',
emptyText: '不能为空'
},{
xtype: 'textfield',
fieldLabel: '原密码',
id: 'oldPassword',
allowBlank: false,
blankText: '不能为空',
//validator: validatePassword
listeners: {'blur': validatePassword}
},{
xtype: 'textfield',
fieldLabel: '用户密码',
name: 'user.userPwd',
inputType: 'password',
id: 'pwd',
allowBlank: false,
blankText: '不能为空',
listeners: {'blur': pwd_blurFn}
},{
xtype: 'textfield',
fieldLabel: '再次输入',
inputType: 'password',
allowBlank: false,
blankText: '不能为空',
id: 'rePwd',
listeners: {'blur': rePwd_blurFn}
}],
buttonAlign: 'center',
buttons: [{
text: '确定',
handler: this.saveSuccessFn
},{
text: '取消',
handler: function(){
Ext.getCmp('updateFormId').getForm().reset();
}
}]
}]
})
},
saveSuccessFn: function(){
var form = Ext.getCmp('updateFormId').getForm();
rePwd_blurFn();
pwd_blurFn();
validatePassword();
//判断校验是否通过，在ff下校验失败会阻止提交，在ie需自己判断
if(form.isValid() && userMark1 && userMark2 && userMark3){
form.submit({
url: 'user_updatePwd.action',
success: function(form, action){
Ext.Msg.alert('提示', action.result.msg, function(){
form.reset();
})
},
failure: save_failure
});}
}
});
rePwd_blurFn = function(){
var pwd = Ext.getDom('pwd').value;
var rePwd = Ext.getDom('rePwd').value;
if(pwd != rePwd && pwd != ""){
userMark2 = false;
Ext.getCmp('rePwd').markInvalid('两次输入的密码不相同');
}
userMark = true;
if(pwd == rePwd){
userMark2 = true;
Ext.getCmp('rePwd').clearInvalid();
Ext.getCmp('pwd').clearInvalid();
}
};
pwd_blurFn = function(){
var pwd = Ext.getDom('pwd').value;
var rePwd = Ext.getDom('rePwd').value;
if(rePwd != "" && pwd != rePwd){
userMark3 = false;
Ext.getCmp('pwd').markInvalid('两次输入的密码不相同');
}
if(pwd == rePwd){
userMark3 = true;
Ext.getCmp('rePwd').clearInvalid();
Ext.getCmp('pwd').clearInvalid();
}
};
validatePassword = function(){
var oldPassword = Ext.getDom("oldPassword").value;
Ext.Ajax.request({
url: 'user_validatePwd.action',
params: {
oldPassword: oldPassword
},
success: function(response, options){
var datas = Ext.util.JSON.decode(response.responseText);
if(datas.msg == false){
userMark1 = false;
Ext.getCmp("oldPassword").markInvalid("原密码不正确");
}else{
userMark1 = true;
}
}
})
}
83.个人信息维护页面 Extjs 页面的更多相关文章
- 78.员工个人信息保镖页面 Extjs 页面
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" ...
- `＜jsp:getProperty＞`动作和`＜jsp:setProperty＞`动作的使用在一个静态页面填写图书的基本信息，页面信息提交给其他页面，并且在其页面显示。要去将表单元素的值赋值给Java
<jsp:getProperty>动作和<jsp:setProperty>动作的使用 1.<jsp:getProperty>动作 语法格式: <jsp:get ...
- js之iframe子页面与父页面通信
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...
- Web设计中打开新页面或页面跳转的方法 js跳转页面
Web设计中打开新页面或页面跳转的方法 一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx ...
- Web设计中打开新页面或页面跳转的方法
一.asp.net c# 打开新页面或页面跳转 1. 最常用的页面跳转(原窗口被替代):Response.Redirect("newpage.aspx"); 2. 利用url地址打 ...
- 嵌入式iframe子页面与父页面js通信方式
iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现 ...
- ionic小白的学习路之目录结构分析、创建组件、创建页面、页面跳转
一. 目录结构分析 hooks:编译cordova 时自定义的脚本命令,方便整合到我们的编译系统和版本控制系统中. node_modules :node 各类依赖包. resources :andro ...
- node.js入门学习（二）MIME模块，request和response对象，demo之不同url请求不同html页面，页面包含图片、样式css等静态资源
一.构建http服务程序-根据不同请求做出不同响应 // 加载http模块 var http = require("http"); // 创建一个http服务对象 http.cre ...
- JS中iframe子页面与父页面之间通信
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...
随机推荐
- java攻城师之路--复习java web之Cookie_Session
Servlet技术 用来动态生成 网页数据资源Servlet生成HTML 页面数据时,所有内容都是通过 response.getWriter response.getOutputStream 向浏览器 ...
- O-理解共享池
我们可以通过show sga命令查看共享池的整体组成部分: ....待截图.... 一.SGA内存结构 Oracle中SGA主要包括: 1.固定数据结构部分(FIXED Size) 2.数据块缓冲区( ...
- @RequestMapping与controller方法返回值介绍
@RequestMapping url映射:定义controller方法对应的url,进行处理器映射使用.@RequestMapping(value="/item")或@Reque ...
- drf07 过滤 排序 分页 异常处理 自动生成接口文档
4. 过滤Filtering 对于列表数据可能需要根据字段进行过滤,我们可以通过添加django-fitlter扩展来增强支持. pip install django-filter 在配置文件sett ...
- const浅析
前言 c++中使用到const的地方有很多, 而且const 本身也针对不同的类型可能有不同的含义, 比如对指针就有顶层和底层. 本节就是探讨关于C++中const的在不同的地方不同表现或含义. co ...
- JAVA经典题--计算一个字符串中每个字符出现的次数
需求: 计算一个字符串中每个字符出现的次数 思路: 通过toCharArray()拿到一个字符数组--> 遍历数组,将数组元素作为key,数值1作为value存入map容器--> 如果k ...
- Spring框架学习之SpringAOP（二）
AOP概念 AOP(Aspect-Oriented Programming,面向切面编程),AOP是OOP(面向对象编程)的补充和完善 AOP的核心思想就是“将应用程序中的商业逻辑同对其提供支持的通用 ...
- Linux之日志管理
日志介绍日志配置日志管理远程日志基于MYSQL的日志 日志介绍日志:历史事件:时间,地点,人物,事件日志级别:事件的关键性程度,Loglevel系统日志服务:sysklogd :CentOS 5之前版 ...
- 清北学堂模拟赛d2t3 逆序对(pair)
题目描述LYK最近在研究逆序对.这个问题是这样的.一开始LYK有一个2^n长度的数组ai.LYK有Q次操作,每次操作都有一个参数k.表示每连续2^k长度作为一个小组.假设n=4,k=2,则a[1],a ...
- [网络流24题#9] [cogs734] 方格取数 [网络流，最大流最小割]
将网格分为两部分,方法是黑白染色,即判断(i+j)&1即可,分开后从白色格子向黑色格子连边,每个点需要四条(边界点可能更少),也就是每个格子周围的四个方向.之后将源点和汇点分别于黑白格子连边, ...