96.extjs 页面
2024-08-31 02:35:18
1.登录js
/**
* @author sux
* @desc 登录
*/
Ext.onReady(function(){
Ext.QuickTips.init(); //错误信息显示必须
var loginForm = new Ext.form.FormPanel({
//title: '用户登录',
width: 290,
height: 300,
labelWidth: 50,
labelAlign: 'right',
defaults: {
width: 210,
layout: 'form',
xtype: 'panel'
},
renderTo: 'loginForm',
layout: 'table',
frame: true, //背景
buttonAlign: 'center',
bodyStyle: 'padding: 75px 0px 0px 50px; background-image: url(img/login.jpg)',
method: 'post',
layoutConfig:{
columns: 2
},
items: [{
items:[{
xtype: 'textfield',
fieldLabel: '用户名', //form布局才显示出labelName
name: 'username',
id: 'indexUserName',
allowBlank: false,
msgTarget: 'side',
blankText: '用户名不能为空',
regex: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
regexText: '不能输入特殊字符'
}],
colspan: 2
},{
items:[{
xtype: 'textfield',
fieldLabel: '密 码',
regex: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/, //字母、数字、汉字、下画线
regexText: '不能输入特殊字符',
name: 'password',
inputType: 'password',
allowBlank: false,
blankText: '用户密码不能为空',
msgTarget: 'side'
}],
colspan: 2
},{
items:[{
xtype: 'textfield',
fieldLabel: '验证码',
blankText: '验证码不能为空',
name: 'validateCode',
allowBlank: false,
msgTarget: 'side',
width: 50,
listeners : {
specialkey : function(field, e) {//添加回车事件
if (e.getKey() == Ext.EventObject.ENTER) {
loginForm.getForm().getEl().dom.action="user_login.action";
loginForm.getForm().getEl().dom.submit();
}
}
}
}],
width: 120
},{
items:[{
xtype: 'panel',
html: '<img src="/hrmsys/validate" title="点击刷新" style="cursor:hand" id="validate" onclick="refreshCode()"/>'
}]
},{
layout: 'table',
layoutConfig:{
columns: 2
},
bodyStyle: 'margin-top: 10px;',
colspan: 2,
items: [{
xtype: 'button',
text: '确定',
style: 'margin-left: 30px;',
width: 60,
handler: function(){
loginForm.getForm().getEl().dom.action="user_login.action";
loginForm.getForm().getEl().dom.submit();
}
},{
xtype: 'button',
width: 60,
style: 'margin-left: 10px;',
text: '取消',
handler: function(){
loginForm.getForm().reset();
}
}]
}]
});
Ext.getCmp("indexUserName").focus(true, true);//初始化页面后用户名获取焦点
}); function refreshCode(){
Ext.getDom('validate').src="/hrmsys/validate.jsp?code="+Math.random();
}
2.主页js
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = "Ext/resources/images/default/s.gif";
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget="qtip";
Ext.apply(Ext.form.VTypes,{
//field表示该宿主组件，val是该宿主的值
//repetition 重复
repetition:function(val,field) {
//是否配置了相比较的目标组件
if(field.repetition){
//获得该目标组件
var cmp = Ext.getCmp(field.repetition.targetCmpId);
if(Ext.isEmpty(cmp)){
Ext.MessageBox.show({
title: '错误',
msg: '发生异常错误，指定的组件未找到',
icon: Ext.Msg.ERROR,
buttons: Ext.Msg.OK
});
}
//比较宿主和目标对象的值
if(val == cmp.getValue()) {
return true;
} else {
return false;
}
}
},
repetitionText:"两个组件的值不相同"
});
var viewPort = new Ext.Viewport({
title:"个人理财系统",
layout:"border",
items:[
{
title:"标题栏",
region:"north",
height:100,
collapsible:true,
html:"<br><center><font size = 6>个人理财系统</font></center>"
},
{
title:"导航栏",
region:"west",
width:200,
items:menu,
collapsible:true,
split:true
},
{
title:"操作区",
region:"center",
items:tabPanel,
collapsible:true
}
]
});
});
3.页面菜单栏
Ext.BLANK_IMAGE_URL = "Ext/resources/images/default/s.gif";
//一级导航
//树节点
var root = new Ext.tree.TreeNode({
id:"root",
text:"根节点"
}); var quanxian;
DWREngine.setAsync(false);
Quanxian.getQuanxian(load);
DWREngine.setAsync(true);
function load(data) {
quanxian = data;
} if(quanxian == 1) {
//用户管理
var menuUserManager = new Ext.tree.TreeNode({
id:"MenuUserManager",
text:"用户管理",
expanded:true
}); //用户添加
var userAddMenu = new Ext.tree.TreeNode({
id:"userAddMenu",
text:"用户添加",
listeners:{
"click":userAddFn
}
}); //用户管理
var userManageMenu = new Ext.tree.TreeNode({
id:"userManageMenu",
text:"用户管理",
listeners:{
"click":userManageFn
}
}); //用户查询
var userQueryMenu = new Ext.tree.TreeNode({
id:"userQueryMenu",
text:"用户查询",
listeners:{
"click":userQueryFn
}
});
menuUserManager.appendChild(userAddMenu);
menuUserManager.appendChild(userManageMenu);
menuUserManager.appendChild(userQueryMenu); root.appendChild(menuUserManager);
} //支出管理
var menuPayOut = new Ext.tree.TreeNode({
id:"menuPayOut",
text:"支出管理",
expanded:true
}); var payOutAddMenu = new Ext.tree.TreeNode({
id:"payOutAddMenu",
text:"支出添加",
listeners:{
"click":payOutAddFn
}
}); var payOutManageMenu = new Ext.tree.TreeNode({
id:"payOutManageMenu",
text:"支出管理",
listeners:{
"click":payOutManageFn
}
}); var payOutQueryMenu = new Ext.tree.TreeNode({
id:"payOutQueryMenu",
text:"支出查询",
listeners:{
"click":payOutQueryFn
}
});
//添加子菜单
menuPayOut.appendChild(payOutAddMenu);
menuPayOut.appendChild(payOutManageMenu);
menuPayOut.appendChild(payOutQueryMenu); //收入管理
var menuIncome = new Ext.tree.TreeNode({
id:"menuIncome",
text:"收入管理",
expanded:true
}); var incomeAddMenu = new Ext.tree.TreeNode({
id:"incomeAddMenu",
text:"收入添加",
listeners:{
"click":inComeAddFn
}
}); var incomeManageMenu = new Ext.tree.TreeNode({
id:"incomeManageMenu",
text:"收入管理",
listeners:{
"click":inComeManageFn
}
}); var incomeQueryMenu = new Ext.tree.TreeNode({
id:"incomeQueryMenu",
text:"收入查询",
listeners:{
"click":inComeQueryFn
}
});
menuIncome.appendChild(incomeAddMenu);
menuIncome.appendChild(incomeManageMenu);
menuIncome.appendChild(incomeQueryMenu); root.appendChild(menuPayOut);
root.appendChild(menuIncome); var menu = new Ext.tree.TreePanel({
border:false,
rootVisible:false,
root:root
}); //添加布尔类型的变量，用来判断该页面是否打开
var userAddPageIsOpen = false;
var userManagePageIsOpen = false;
var userQueryPageIsOpen = false;
var payOutAddPageIsOpen = false;
var payOutManagePageIsOpen = false;
var payOutQueryPageIsOpen = false;
var inComeAddPageIsOpen = false;
var inComeManagePageIsOpen = false;
var inComeQueryPageIsOpen = false;
4.支持管理js
function payOutManageFn(){
//记录类型
var payOut = Ext.data.Record.create([
{name:"id",mapping:"id"},
{name:"payOutName",mapping:"payOutName"},
{name:"payOutMoney",mapping:"payOutMoney"},
{name:"payOutDate",mapping:"payOutDate",type:"date",dateFormat:"Y-m-dTH:i:s"}
]);
//存储器
var store = new Ext.data.Store({
url:"getPayOut.action",
reader:new Ext.data.JsonReader({
root:"allPayOut",
id:"id",
totalProperty:"recordSize"
},payOut)
});
var sm = new Ext.grid.CheckboxSelectionModel();
//可编辑表格。
var gridPanel = new Ext.grid.EditorGridPanel({
width:300,
height:200,
frame:true,
store:store,
columns:[
sm,
{header:"支出名称",dataIndex:"payOutName",sortable:true,
editor:new Ext.form.TextField({
id:"payOutName",
name:"payOutName",
fieldLabel:"支出名称",
minLength:2,
minLengthText:"支出名称长度不能小于2个字符",
maxLength:12,
maxLengthText:"支出名称长度不能大于12个字符",
allowBlank:false,
blankText:"支出名称不能为空"
})
},
{header:"支出金额",dataIndex:"payOutMoney",sortable:true,
editor:new Ext.form.NumberField({
id:"payOutMoney",
name:"payOutMoney",
fieldLabel:"支出金额",
allowNegative : false,//不允许输入负数
nanText :'请输入有效的整数',//无效数字提示
allowDecimals : true,//允许输入小数
maxValue : 10000,//最大值
minValue : 0,//最小值
minText:"支出金额不能小于{0}元",
maxText:"支出金额不能大于{0}元"
})
},
{header:"支出日期",dataIndex:"payOutDate",sortable:true,renderer:new Ext.util.Format.dateRenderer("Y年m月d日"),
editor:new Ext.form.DateField({
id:"payOutDate",
name:"payOutDate",
width:130,
fieldLabel:"支出日期",
maxValue:"12/31/2009",
minValue:"01/01/2009",
maxText:"支出日期不能大于{0}",
minText:"支出日期不能小于{0}",
format:"Y年m月d日"
})
}
],
autoExpandColumn:3,
//分页控制条
bbar:new Ext.PagingToolbar({
pageSize:10,//每页显示多少条记录
store:store,//数据源
displayInfo:true,
displayMsg:"当前显示第{0}条到{1}条记录，一共有{2}条记录",
emptyMsg:"没有任何记录",
firstText:"首页",
prevText:"上一页",
nextText:"下一页",
lastText:"尾页",
refreshText:"刷新"
}),
sm:sm,
tbar:[
{
text:"删除",
handler:function(){
//获得选择的行，可以是多行
var rows = gridPanel.getSelectionModel().getSelections();
//如果没有选择任何行，则提示警告西悉尼
if(rows.length == 0) {
Ext.MessageBox.alert("警告","请选择一行数据进行删除");
} else {
//弹出确定提示框
Ext.MessageBox.confirm("提示框","是否确定要进行删除!",function(btn){
//只有在确认的情况下，才进行删除
if(btn == "yes") {
//首先将第一个id赋值给ids。
var ids = rows[0].id;
//如果还存在多行，则都赋值给ids
for(var i = 1; i < rows.length; i++) {
ids = ids + "," + rows[i].id;
}
//发送异步请求
Ext.Ajax.request({
url:"deletePayOut.action",//请求地址
params:{id:ids}, //参数，id
success:function(result){ //与服务器交互成功
var jsonStr = Ext.util.JSON.decode(result.responseText)
Ext.MessageBox.alert("成功",jsonStr.msg);
},
failure:function(result){ //与服务器交互不成功
var jsonStr = Ext.util.JSON.decode(result.responseText)
Ext.MessageBox.alert("失败",jsonStr.msg);
}
});
//进行删除操作
for(var i = 0; i < rows.length; i++) {
//删除指定数据
store.remove(rows[i]);
}
}
});
}
}
}
]
});
store.load({params:{start:0, limit:10}});
//给EditorGridPanel添加afteredit事件处理代码
////EditorGridPanel的afteredit事件监听
//获取编辑后的值
gridPanel.on("afteredit",function(obj){
//必须知道的信息
//1.支出信息的id，方便服务器来查询该id对应的支出记录
var id = obj.record.get("id");
//2.修改的哪个字段
var field = obj.field;
//3.修改后的值是多少
var value = obj.value;
if(field == "payOutDate") {
value = Ext.util.Format.date(value,"Y年m月d日");
}
//发送异步请求
Ext.Ajax.request({
//1.请求的地址
url:"updatePayOut.action",
//2.请求的方式
method:"post",
//3.请求参数
params:{
id:id,
field:field,
value:value
},
callback:function(options,success,response) {
var jsonStr = Ext.util.JSON.decode(response.responseText);
if(jsonStr.success) {
//编辑后重新提交
obj.record.commit();
}else {
Ext.MessageBox.alert("失败",jsonStr.msg);
obj.record.reject();//撤销
}
}
});
});
if(!payOutManagePageIsOpen){
var tabPage = tabPanel.add({
title:"支出管理",
height:400,
closable:true,
layout:"fit",
items:[
gridPanel
],
listeners:{
beforedestroy:function(){
payOutManagePageIsOpen = false;
}
}
});
tabPanel.setActiveTab(tabPage);
payOutManagePageIsOpen = true;
}
}
5.支出查询js
function payOutQueryFn(){
//记录类型
var payOut = Ext.data.Record.create([
{name:"id",mapping:"id"},
{name:"payOutName",mapping:"payOutName"},
{name:"payOutMoney",mapping:"payOutMoney"},
{name:"payOutDate",mapping:"payOutDate",type:"date",dateFormat:"Y-m-dTH:i:s"}
]);
//存储器
var store = new Ext.data.Store({
url:"queryPayOut.action",
reader:new Ext.data.JsonReader({
root:"allPayOut",
id:"id",
totalProperty:"recordSize"
},payOut)
});
//查询表单
var queryForm = new Ext.FormPanel({
labelAlign:"right",
baseCls: 'x-plain',
layout:"column",
items:[
new Ext.form.Label({
text:"查询条件:"
}),
new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({
fields:["queryL","queryV"],
data:[
["支出名称","payOutName"],
["支出金额","payOutMoney"]
]
}),
triggerAction:"all",
selectOnFocus:true,
typeAhead : true,
displayField:"queryL",
hiddenName:"queryCondition",
valueField:"queryV",
mode:"local",
readOnly: true
}),
//标签
new Ext.form.Label({
text:"查询值"
}),
new Ext.form.TextField({
id:"queryValue",
name:"queryValue"
})
]
})
var gridPanel = new Ext.grid.GridPanel({
width:300,
height:200,
frame:true,
store:store,
columns:[
{header:"支出名称",dataIndex:"payOutName",sortable:true
},
{header:"支出金额",dataIndex:"payOutMoney",sortable:true
},
{header:"支出日期",dataIndex:"payOutDate",sortable:true,renderer:new Ext.util.Format.dateRenderer("Y年m月d日")
}
],
autoExpandColumn:2,
//分页控制条
bbar:new Ext.PagingToolbar({
pageSize:10,//每页显示多少条记录
store:store,//数据源
displayInfo:true,
displayMsg:"当前显示第{0}条到{1}条记录，一共有{2}条记录",
emptyMsg:"没有任何记录",
firstText:"首页",
prevText:"上一页",
nextText:"下一页",
lastText:"尾页",
refreshText:"刷新"
}),
selModel:new Ext.grid.RowSelectionModel({singleSelect:false}),
tbar:[
queryForm,
{text:"查询",handler:function(){
store.load({
params:
{
start:0, limit:10,
queryCondition:Ext.get("queryCondition").dom.value, //查询条件
queryValue:Ext.get("queryValue").dom.value //查询值
}});
}}
]
});
store.load({params:{start:0, limit:10}});
if(!payOutQueryPageIsOpen) {
var tabPage = tabPanel.add({
title:"支出查询",
height:400,
closable:true,
layout:"fit",
items:[
gridPanel
],
listeners:{
beforedestroy:function(){
payOutQueryPageIsOpen = false;
}
}
});
tabPanel.setActiveTab(tabPage);
payOutQueryPageIsOpen = true;
}
}
7.
var tabPanel = new Ext.TabPanel({
activeTab : 0,//默认激活第一个tab页
animScroll : true,//使用动画滚动效果
enableTabScroll : true,//tab标签超宽时自动出现滚动按钮
items: [
{
title: '欢迎页面',
height:600,
closable : false,//允许关闭
html : '<div style="height:600px;padding-top:200px;text-align: center;"><font size = 6>欢迎使用个人理财系统</font></div>'
}
],listeners:{
//右键关闭菜单事件
"contextmenu":function(tabPanel,myitem,e){
var menu = new Ext.menu.Menu([
{text:"关闭当前选项页",handler:function(){
if(myitem != tabPanel.getItem(0)) {
tabPanel.remove(myitem)
}
}},
{text:"关闭其他所有选项页",handler:function() {
tabPanel.items.each(function(item){
if(item != myitem && item != tabPanel.getItem(0)) {
tabPanel.remove(item);
}
});
}
}
]);
// 在绝对位置xyposition显示当前菜单
menu.showAt(e.getPoint());
}
}
});
最新文章
- 总结个关于MySQL数据库的问题
- 支付宝APP支付后台参数生成Java版（一）
- NOSQL概要
- Linux下打包压缩war和解压war包
- java学习之（接口）
- UVA - 213 Message Decoding （输入字符串并对单个字符进行操作的输入输出）
- 从ulimit命令看socket的限制
- Win CE 6.0 获取手持机GPS定位1----基础知识 （C#）
- c#拷贝整个文件夹到指定文件夹下(非递归)
- c#文件管理
- 运维监控-基于yum的方式部署Zabbix Server 4.0 版本
- jquery print属性设置
- chrome 抓包的小功能--preserve log (记录页面跳转后，所有的抓包记录)
- Django模板如何用一个变量查找字典值
- [C#.Net]判断文件是否被占用的两种方法
- 本地Git与github连接/上传配置
- 基于php-fpm的配置详解
- Python之括号()[]{}
- maven中跳过单元测试(转)
- 使用BEEGO建立一个基本的API框架