• 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          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 });
  • 相关阅读:
    golang的select典型用法
    vscode配置git和提交代码到github教程
    VsCode中好用的git源代码管理插件GitLens
    GoMock框架使用指南
    golang对结构体排序,重写sort
    Go语言开发Prometheus Exporter示例
    golang 字符串拼接性能比较
    golang中的strings.Compare
    各大厂分布式链路跟踪系统架构对比
    NV triton启动方式说明
  • 原文地址:https://www.cnblogs.com/sharpest/p/7704424.html
Copyright © 2020-2023  润新知