1.登录js
1 /** 2 * @author sux 3 * @desc 登录 4 */ 5 Ext.onReady(function(){ 6 Ext.QuickTips.init(); //错误信息显示必须 7 var loginForm = new Ext.form.FormPanel({ 8 //title: '用户登录', 9 290, 10 height: 300, 11 labelWidth: 50, 12 labelAlign: 'right', 13 defaults: { 14 210, 15 layout: 'form', 16 xtype: 'panel' 17 }, 18 renderTo: 'loginForm', 19 layout: 'table', 20 frame: true, //背景 21 buttonAlign: 'center', 22 bodyStyle: 'padding: 75px 0px 0px 50px; background-image: url(img/login.jpg)', 23 method: 'post', 24 layoutConfig:{ 25 columns: 2 26 }, 27 items: [{ 28 items:[{ 29 xtype: 'textfield', 30 fieldLabel: '用户名', //form布局才显示出labelName 31 name: 'username', 32 id: 'indexUserName', 33 allowBlank: false, 34 msgTarget: 'side', 35 blankText: '用户名不能为空', 36 regex: /^[a-zA-Z0-9_u4e00-u9fa5]+$/, 37 regexText: '不能输入特殊字符' 38 }], 39 colspan: 2 40 },{ 41 items:[{ 42 xtype: 'textfield', 43 fieldLabel: '密 码', 44 regex: /^[a-zA-Z0-9_u4e00-u9fa5]+$/, //字母、数字、汉字、下画线 45 regexText: '不能输入特殊字符', 46 name: 'password', 47 inputType: 'password', 48 allowBlank: false, 49 blankText: '用户密码不能为空', 50 msgTarget: 'side' 51 }], 52 colspan: 2 53 },{ 54 items:[{ 55 xtype: 'textfield', 56 fieldLabel: '验证码', 57 blankText: '验证码不能为空', 58 name: 'validateCode', 59 allowBlank: false, 60 msgTarget: 'side', 61 50, 62 listeners : { 63 specialkey : function(field, e) {//添加回车事件 64 if (e.getKey() == Ext.EventObject.ENTER) { 65 loginForm.getForm().getEl().dom.action="user_login.action"; 66 loginForm.getForm().getEl().dom.submit(); 67 } 68 } 69 } 70 }], 71 120 72 },{ 73 items:[{ 74 xtype: 'panel', 75 html: '<img src="/hrmsys/validate" title="点击刷新" style="cursor:hand" id="validate" onclick="refreshCode()"/>' 76 }] 77 },{ 78 layout: 'table', 79 layoutConfig:{ 80 columns: 2 81 }, 82 bodyStyle: 'margin-top: 10px;', 83 colspan: 2, 84 items: [{ 85 xtype: 'button', 86 text: '确定', 87 style: 'margin-left: 30px;', 88 60, 89 handler: function(){ 90 loginForm.getForm().getEl().dom.action="user_login.action"; 91 loginForm.getForm().getEl().dom.submit(); 92 } 93 },{ 94 xtype: 'button', 95 60, 96 style: 'margin-left: 10px;', 97 text: '取消', 98 handler: function(){ 99 loginForm.getForm().reset(); 100 } 101 }] 102 }] 103 }); 104 Ext.getCmp("indexUserName").focus(true, true);//初始化页面后用户名获取焦点 105 }); 106 107 function refreshCode(){ 108 Ext.getDom('validate').src="/hrmsys/validate.jsp?code="+Math.random(); 109 }
2.主页js
1 Ext.onReady(function(){ 2 Ext.BLANK_IMAGE_URL = "Ext/resources/images/default/s.gif"; 3 Ext.QuickTips.init(); 4 Ext.form.Field.prototype.msgTarget="qtip"; 5 6 Ext.apply(Ext.form.VTypes,{ 7 //field表示该宿主组件，val是该宿主的值 8 //repetition 重复 9 repetition:function(val,field) { 10 //是否配置了相比较的目标组件 11 if(field.repetition){ 12 //获得该目标组件 13 var cmp = Ext.getCmp(field.repetition.targetCmpId); 14 if(Ext.isEmpty(cmp)){ 15 Ext.MessageBox.show({ 16 title: '错误', 17 msg: '发生异常错误，指定的组件未找到', 18 icon: Ext.Msg.ERROR, 19 buttons: Ext.Msg.OK 20 }); 21 } 22 //比较宿主和目标对象的值 23 if(val == cmp.getValue()) { 24 return true; 25 } else { 26 return false; 27 } 28 } 29 }, 30 repetitionText:"两个组件的值不相同" 31 }); 32 33 var viewPort = new Ext.Viewport({ 34 title:"个人理财系统", 35 layout:"border", 36 items:[ 37 { 38 title:"标题栏", 39 region:"north", 40 height:100, 41 collapsible:true, 42 html:"<br><center><font size = 6>个人理财系统</font></center>" 43 }, 44 { 45 title:"导航栏", 46 region:"west", 47 200, 48 items:menu, 49 collapsible:true, 50 split:true 51 }, 52 { 53 title:"操作区", 54 region:"center", 55 items:tabPanel, 56 collapsible:true 57 } 58 ] 59 }); 60 });
3.页面菜单栏
1 Ext.BLANK_IMAGE_URL = "Ext/resources/images/default/s.gif"; 2 //一级导航 3 //树节点 4 var root = new Ext.tree.TreeNode({ 5 id:"root", 6 text:"根节点" 7 }); 8 9 var quanxian; 10 DWREngine.setAsync(false); 11 Quanxian.getQuanxian(load); 12 DWREngine.setAsync(true); 13 function load(data) { 14 quanxian = data; 15 } 16 17 if(quanxian == 1) { 18 //用户管理 19 var menuUserManager = new Ext.tree.TreeNode({ 20 id:"MenuUserManager", 21 text:"用户管理", 22 expanded:true 23 }); 24 25 //用户添加 26 var userAddMenu = new Ext.tree.TreeNode({ 27 id:"userAddMenu", 28 text:"用户添加", 29 listeners:{ 30 "click":userAddFn 31 } 32 }); 33 34 //用户管理 35 var userManageMenu = new Ext.tree.TreeNode({ 36 id:"userManageMenu", 37 text:"用户管理", 38 listeners:{ 39 "click":userManageFn 40 } 41 }); 42 43 //用户查询 44 var userQueryMenu = new Ext.tree.TreeNode({ 45 id:"userQueryMenu", 46 text:"用户查询", 47 listeners:{ 48 "click":userQueryFn 49 } 50 }); 51 menuUserManager.appendChild(userAddMenu); 52 menuUserManager.appendChild(userManageMenu); 53 menuUserManager.appendChild(userQueryMenu); 54 55 root.appendChild(menuUserManager); 56 } 57 58 //支出管理 59 var menuPayOut = new Ext.tree.TreeNode({ 60 id:"menuPayOut", 61 text:"支出管理", 62 expanded:true 63 }); 64 65 var payOutAddMenu = new Ext.tree.TreeNode({ 66 id:"payOutAddMenu", 67 text:"支出添加", 68 listeners:{ 69 "click":payOutAddFn 70 } 71 }); 72 73 var payOutManageMenu = new Ext.tree.TreeNode({ 74 id:"payOutManageMenu", 75 text:"支出管理", 76 listeners:{ 77 "click":payOutManageFn 78 } 79 }); 80 81 var payOutQueryMenu = new Ext.tree.TreeNode({ 82 id:"payOutQueryMenu", 83 text:"支出查询", 84 listeners:{ 85 "click":payOutQueryFn 86 } 87 }); 88 //添加子菜单 89 menuPayOut.appendChild(payOutAddMenu); 90 menuPayOut.appendChild(payOutManageMenu); 91 menuPayOut.appendChild(payOutQueryMenu); 92 93 //收入管理 94 var menuIncome = new Ext.tree.TreeNode({ 95 id:"menuIncome", 96 text:"收入管理", 97 expanded:true 98 }); 99 100 var incomeAddMenu = new Ext.tree.TreeNode({ 101 id:"incomeAddMenu", 102 text:"收入添加", 103 listeners:{ 104 "click":inComeAddFn 105 } 106 }); 107 108 var incomeManageMenu = new Ext.tree.TreeNode({ 109 id:"incomeManageMenu", 110 text:"收入管理", 111 listeners:{ 112 "click":inComeManageFn 113 } 114 }); 115 116 var incomeQueryMenu = new Ext.tree.TreeNode({ 117 id:"incomeQueryMenu", 118 text:"收入查询", 119 listeners:{ 120 "click":inComeQueryFn 121 } 122 }); 123 menuIncome.appendChild(incomeAddMenu); 124 menuIncome.appendChild(incomeManageMenu); 125 menuIncome.appendChild(incomeQueryMenu); 126 127 128 root.appendChild(menuPayOut); 129 root.appendChild(menuIncome); 130 131 var menu = new Ext.tree.TreePanel({ 132 border:false, 133 rootVisible:false, 134 root:root 135 }); 136 137 138 //添加布尔类型的变量，用来判断该页面是否打开 139 var userAddPageIsOpen = false; 140 var userManagePageIsOpen = false; 141 var userQueryPageIsOpen = false; 142 var payOutAddPageIsOpen = false; 143 var payOutManagePageIsOpen = false; 144 var payOutQueryPageIsOpen = false; 145 var inComeAddPageIsOpen = false; 146 var inComeManagePageIsOpen = false; 147 var inComeQueryPageIsOpen = false;
4.支持管理js
1 function payOutManageFn(){ 2 3 //记录类型 4 var payOut = Ext.data.Record.create([ 5 {name:"id",mapping:"id"}, 6 {name:"payOutName",mapping:"payOutName"}, 7 {name:"payOutMoney",mapping:"payOutMoney"}, 8 {name:"payOutDate",mapping:"payOutDate",type:"date",dateFormat:"Y-m-dTH:i:s"} 9 ]); 10 11 //存储器 12 var store = new Ext.data.Store({ 13 url:"getPayOut.action", 14 reader:new Ext.data.JsonReader({ 15 root:"allPayOut", 16 id:"id", 17 totalProperty:"recordSize" 18 },payOut) 19 }); 20 21 var sm = new Ext.grid.CheckboxSelectionModel(); 22 //可编辑表格。 23 var gridPanel = new Ext.grid.EditorGridPanel({ 24 300, 25 height:200, 26 frame:true, 27 store:store, 28 columns:[ 29 sm, 30 {header:"支出名称",dataIndex:"payOutName",sortable:true, 31 editor:new Ext.form.TextField({ 32 id:"payOutName", 33 name:"payOutName", 34 fieldLabel:"支出名称", 35 minLength:2, 36 minLengthText:"支出名称长度不能小于2个字符", 37 maxLength:12, 38 maxLengthText:"支出名称长度不能大于12个字符", 39 allowBlank:false, 40 blankText:"支出名称不能为空" 41 }) 42 }, 43 {header:"支出金额",dataIndex:"payOutMoney",sortable:true, 44 editor:new Ext.form.NumberField({ 45 id:"payOutMoney", 46 name:"payOutMoney", 47 fieldLabel:"支出金额", 48 allowNegative : false,//不允许输入负数 49 nanText :'请输入有效的整数',//无效数字提示 50 allowDecimals : true,//允许输入小数 51 maxValue : 10000,//最大值 52 minValue : 0,//最小值 53 minText:"支出金额不能小于{0}元", 54 maxText:"支出金额不能大于{0}元" 55 }) 56 }, 57 {header:"支出日期",dataIndex:"payOutDate",sortable:true,renderer:new Ext.util.Format.dateRenderer("Y年m月d日"), 58 editor:new Ext.form.DateField({ 59 id:"payOutDate", 60 name:"payOutDate", 61 130, 62 fieldLabel:"支出日期", 63 maxValue:"12/31/2009", 64 minValue:"01/01/2009", 65 maxText:"支出日期不能大于{0}", 66 minText:"支出日期不能小于{0}", 67 format:"Y年m月d日" 68 }) 69 } 70 ], 71 autoExpandColumn:3, 72 //分页控制条 73 bbar:new Ext.PagingToolbar({ 74 pageSize:10,//每页显示多少条记录 75 store:store,//数据源 76 displayInfo:true, 77 displayMsg:"当前显示第{0}条到{1}条记录，一共有{2}条记录", 78 emptyMsg:"没有任何记录", 79 firstText:"首页", 80 prevText:"上一页", 81 nextText:"下一页", 82 lastText:"尾页", 83 refreshText:"刷新" 84 }), 85 sm:sm, 86 tbar:[ 87 { 88 text:"删除", 89 handler:function(){ 90 //获得选择的行，可以是多行 91 var rows = gridPanel.getSelectionModel().getSelections(); 92 //如果没有选择任何行，则提示警告西悉尼 93 if(rows.length == 0) { 94 Ext.MessageBox.alert("警告","请选择一行数据进行删除"); 95 } else { 96 //弹出确定提示框 97 Ext.MessageBox.confirm("提示框","是否确定要进行删除!",function(btn){ 98 //只有在确认的情况下，才进行删除 99 if(btn == "yes") { 100 //首先将第一个id赋值给ids。 101 var ids = rows[0].id; 102 //如果还存在多行，则都赋值给ids 103 for(var i = 1; i < rows.length; i++) { 104 ids = ids + "," + rows[i].id; 105 } 106 //发送异步请求 107 Ext.Ajax.request({ 108 url:"deletePayOut.action",//请求地址 109 params:{id:ids}, //参数，id 110 success:function(result){ //与服务器交互成功 111 var jsonStr = Ext.util.JSON.decode(result.responseText) 112 Ext.MessageBox.alert("成功",jsonStr.msg); 113 }, 114 failure:function(result){ //与服务器交互不成功 115 var jsonStr = Ext.util.JSON.decode(result.responseText) 116 Ext.MessageBox.alert("失败",jsonStr.msg); 117 } 118 }); 119 120 //进行删除操作 121 for(var i = 0; i < rows.length; i++) { 122 //删除指定数据 123 store.remove(rows[i]); 124 } 125 } 126 }); 127 } 128 } 129 } 130 ] 131 }); 132 133 store.load({params:{start:0, limit:10}}); 134 //给EditorGridPanel添加afteredit事件处理代码 135 ////EditorGridPanel的afteredit事件监听 136 //获取编辑后的值 137 gridPanel.on("afteredit",function(obj){ 138 //必须知道的信息 139 //1.支出信息的id，方便服务器来查询该id对应的支出记录 140 var id = obj.record.get("id"); 141 142 //2.修改的哪个字段 143 var field = obj.field; 144 145 //3.修改后的值是多少 146 var value = obj.value; 147 148 if(field == "payOutDate") { 149 value = Ext.util.Format.date(value,"Y年m月d日"); 150 } 151 152 //发送异步请求 153 Ext.Ajax.request({ 154 //1.请求的地址 155 url:"updatePayOut.action", 156 //2.请求的方式 157 method:"post", 158 //3.请求参数 159 params:{ 160 id:id, 161 field:field, 162 value:value 163 }, 164 callback:function(options,success,response) { 165 var jsonStr = Ext.util.JSON.decode(response.responseText); 166 if(jsonStr.success) { 167 //编辑后重新提交 168 obj.record.commit(); 169 }else { 170 Ext.MessageBox.alert("失败",jsonStr.msg); 171 obj.record.reject();//撤销 172 } 173 } 174 175 176 }); 177 }); 178 179 if(!payOutManagePageIsOpen){ 180 var tabPage = tabPanel.add({ 181 title:"支出管理", 182 height:400, 183 closable:true, 184 layout:"fit", 185 items:[ 186 gridPanel 187 ], 188 listeners:{ 189 beforedestroy:function(){ 190 payOutManagePageIsOpen = false; 191 } 192 } 193 }); 194 tabPanel.setActiveTab(tabPage); 195 payOutManagePageIsOpen = true; 196 } 197 }
5.支出查询js
1 function payOutQueryFn(){ 2 3 //记录类型 4 var payOut = Ext.data.Record.create([ 5 {name:"id",mapping:"id"}, 6 {name:"payOutName",mapping:"payOutName"}, 7 {name:"payOutMoney",mapping:"payOutMoney"}, 8 {name:"payOutDate",mapping:"payOutDate",type:"date",dateFormat:"Y-m-dTH:i:s"} 9 ]); 10 11 //存储器 12 var store = new Ext.data.Store({ 13 url:"queryPayOut.action", 14 reader:new Ext.data.JsonReader({ 15 root:"allPayOut", 16 id:"id", 17 totalProperty:"recordSize" 18 },payOut) 19 }); 20 21 22 //查询表单 23 var queryForm = new Ext.FormPanel({ 24 labelAlign:"right", 25 baseCls: 'x-plain', 26 layout:"column", 27 items:[ 28 new Ext.form.Label({ 29 text:"查询条件:" 30 }), 31 new Ext.form.ComboBox({ 32 store:new Ext.data.SimpleStore({ 33 fields:["queryL","queryV"], 34 data:[ 35 ["支出名称","payOutName"], 36 ["支出金额","payOutMoney"] 37 ] 38 }), 39 triggerAction:"all", 40 selectOnFocus:true, 41 typeAhead : true, 42 displayField:"queryL", 43 hiddenName:"queryCondition", 44 valueField:"queryV", 45 mode:"local", 46 readOnly: true 47 }), 48 //标签 49 new Ext.form.Label({ 50 text:"查询值" 51 }), 52 new Ext.form.TextField({ 53 id:"queryValue", 54 name:"queryValue" 55 }) 56 ] 57 }) 58 var gridPanel = new Ext.grid.GridPanel({ 59 300, 60 height:200, 61 frame:true, 62 store:store, 63 columns:[ 64 {header:"支出名称",dataIndex:"payOutName",sortable:true 65 }, 66 {header:"支出金额",dataIndex:"payOutMoney",sortable:true 67 }, 68 {header:"支出日期",dataIndex:"payOutDate",sortable:true,renderer:new Ext.util.Format.dateRenderer("Y年m月d日") 69 } 70 ], 71 autoExpandColumn:2, 72 //分页控制条 73 bbar:new Ext.PagingToolbar({ 74 pageSize:10,//每页显示多少条记录 75 store:store,//数据源 76 displayInfo:true, 77 displayMsg:"当前显示第{0}条到{1}条记录，一共有{2}条记录", 78 emptyMsg:"没有任何记录", 79 firstText:"首页", 80 prevText:"上一页", 81 nextText:"下一页", 82 lastText:"尾页", 83 refreshText:"刷新" 84 }), 85 selModel:new Ext.grid.RowSelectionModel({singleSelect:false}), 86 tbar:[ 87 queryForm, 88 {text:"查询",handler:function(){ 89 store.load({ 90 params: 91 { 92 start:0, limit:10, 93 queryCondition:Ext.get("queryCondition").dom.value, //查询条件 94 queryValue:Ext.get("queryValue").dom.value //查询值 95 }}); 96 }} 97 ] 98 }); 99 100 store.load({params:{start:0, limit:10}}); 101 if(!payOutQueryPageIsOpen) { 102 var tabPage = tabPanel.add({ 103 title:"支出查询", 104 height:400, 105 closable:true, 106 layout:"fit", 107 items:[ 108 gridPanel 109 ], 110 listeners:{ 111 beforedestroy:function(){ 112 payOutQueryPageIsOpen = false; 113 } 114 } 115 }); 116 tabPanel.setActiveTab(tabPage); 117 payOutQueryPageIsOpen = true; 118 } 119 }
7.
1 var tabPanel = new Ext.TabPanel({ 2 activeTab : 0,//默认激活第一个tab页 3 animScroll : true,//使用动画滚动效果 4 enableTabScroll : true,//tab标签超宽时自动出现滚动按钮 5 items: [ 6 { 7 title: '欢迎页面', 8 height:600, 9 closable : false,//允许关闭 10 html : '<div style="height:600px;padding-top:200px;text-align: center;"><font size = 6>欢迎使用个人理财系统</font></div>' 11 } 12 ],listeners:{ 13 //右键关闭菜单事件 14 "contextmenu":function(tabPanel,myitem,e){ 15 var menu = new Ext.menu.Menu([ 16 {text:"关闭当前选项页",handler:function(){ 17 if(myitem != tabPanel.getItem(0)) { 18 tabPanel.remove(myitem) 19 } 20 }}, 21 {text:"关闭其他所有选项页",handler:function() { 22 tabPanel.items.each(function(item){ 23 if(item != myitem && item != tabPanel.getItem(0)) { 24 tabPanel.remove(item); 25 } 26 }); 27 } 28 } 29 ]); 30 // 在绝对位置xyposition显示当前菜单 31 menu.showAt(e.getPoint()); 32 } 33 } 34 });