96.extjs 页面

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         width: 290,
 10         height: 300,
 11         labelWidth: 50,
 12         labelAlign: 'right',
 13         defaults: {
 14             width: 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: '密&nbsp;&nbsp;&nbsp;码',
 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             width: 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             width: 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                 width: 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                 width: 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                 width: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         width: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                 width: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         width: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 }

 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 });

posted on 2017-10-21 12:29 Sharpest 阅读(235) 评论(0) 编辑收藏举报