96.extjs 页面

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