90.商城登录页面Extjs

1.

  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     var mainWindow = new Ext.Window({
  7         width:600,
  8         height:400,
  9         title:"商场VIP消费情况查询系统",
 10         closable:false,
 11         resizable:false, //设置是否可以改变大小
 12         draggable:false,  //设置是否可以拖动
 13         tbar:new Ext.Toolbar({
 14             height:25
 15         })
 16     });
 17     mainWindow.show();
 18     
 19     //商品信息管理菜单
 20     var commodityMenu = new Ext.menu.Menu({
 21         //有效菜单项数组  //有效菜单项数组  
 22         items:[
 23             {text:"商品信息录入",handler:commodityAdd},
 24             {text:"商品信息查询",handler:commodityQuery}
 25         ]
 26     });
 27     
 28     //VIP信息管理菜单
 29     var vipMenu = new Ext.menu.Menu({
 30         items:[
 31             {text:"VIP信息录入",handler:vipAdd},
 32             {text:"VIP信息查询",handler:vipQuery},
 33             {text:"VIP消费信息录入",handler:consumeAdd},
 34             {text:"VIP消费信息查询",handler:consumeQuery}
 35         ]    
 36     });
 37     
 38     //
 39     //getTopToolbar法访问该工具栏 
 40     //SplitButton带分割线的按钮
 41     mainWindow.getTopToolbar().add(new Ext.SplitButton({
 42         text:"商品信息管理",
 43         menu:commodityMenu
 44     }));
 45     
 46     
 47     mainWindow.getTopToolbar().add(new Ext.SplitButton({
 48         text:"VIP信息管理",
 49         menu:vipMenu
 50     }));
 51     
 52     mainWindow.getTopToolbar().add(new Ext.Button({
 53         text:"系统维护"
 54     }));
 55     
 56     mainWindow.getTopToolbar().add(new Ext.Button({
 57         text:"帮助",
 58         handler:function showHelpWindow(){
 59             var myToolBar = new Ext.Toolbar({
 60                 listeners:
 61                           {
 62                             'render':function(t)
 63                             {
 64                                t.getEl().child("table").wrap({tag:'center'});
 65                             }
 66                         },
 67                 items:[
 68                     {text:"关闭",handler:function helpWindowClose(){
 69                             helpWindow.close();
 70                         }
 71                     }
 72                 ]        
 73                         
 74             });
 75             
 76             var helpPanel = new Ext.Panel({
 77                     height:283,
 78                     html:"<center><font size='3'><B>本系统的主要功能</B></font></center>" +
 79                             "<h2>◆    登录</h2>" +
 80                             "本系统为商场VIP消费情况查询系统，具有一定的保密性。因此必须要有一定的权限才能使用本系统查询。要进行查询就必须先登录才能使用本系统。登录之后进入系统的主界面，在主界面可以选择用户想要执行的功能模块。" +
 81                             "<h2>◆    商品信息录入</h2>" +
 82                             "在维护本系统时，要不断更新系统的数据。其中商品的信息是在不断增加的，当新进商品时，要保证商品信息的同步更新。在本模块可将新进商品的信息录入保存在服务器的数据库中。" +
 83                             "<h2>◆    商品信息查询</h2>" +
 84                             "有时候想了解某种商品的详细信息。在本模块可以查询所想知道的商品的详细信息。",
 85                     bbar:myToolBar
 86             });
 87             
 88             var helpWindow = new Ext.Window({
 89                 width:400,
 90                 height:300,
 91                 items:helpPanel,
 92                 resizable:false,
 93                 draggable:false,
 94                 modal:true
 95             });
 96             helpWindow.show();
 97         }
 98     }));
 99     
100     mainWindow.getTopToolbar().add(new Ext.Button({
101         text:"退出",
102         handler:function pExit(){
103             window.close();
104         }
105     }));
106     
107     
108     //登录表单面板
109     var loginForm = new Ext.FormPanel({
110         renderTo:"loginForm",
111         id:"loginForm1",
112         width:340,
113         height:150,
114         frame:true,
115         labelAlign:"right",
116         monitorValid:true,
117         items:[
118             new Ext.form.TextField({
119                 id:"username",
120                 name:"username",
121                 fieldLabel:"用户名",
122                 minLength:3,
123                 minLengthText:"用户名长度不能小于{0}",
124                 maxLength:12,
125                 maxLengthText:"用户名长度不能大于{0}",
126                 allowBlank:false,
127                 blankText:"用户名必须输入"
128             }),
129             new Ext.form.TextField({
130                 id:"password",
131                 name:"password",
132                 fieldLabel:"密码",
133                 inputType:"password",
134                 allowBlank:false,
135                 blankText:"密码必须输入"
136             }),
137             new Ext.form.TextField({
138                 id:"randCode",
139                 name:"randCode",
140                 width:70,
141                 fieldLabel:"验证码",
142                 allowBlank:false,
143                 blankText:"验证码必须输入"
144             })
145         ],
146         buttons:[
147             {text:"登录",formBind:true,handler:function(){
148                 loginForm.getForm().submit({
149                     url:"login.action",
150                     waitMsg:"请稍等，系统正在进行登录!",
151                     success:function(form, action){
152                         Ext.MessageBox.alert("成功",action.result.msg);
153                         loginWindow.close();
154                     },
155                     failure:function(form, action){
156                         Ext.MessageBox.alert("失败",action.result.msg);
157                     }
158                 });
159             }},
160             {text:"重置",handler:function(){
161                 loginForm.form.reset();
162             }}
163         ]
164     });
165     
166     var rc = Ext.getDom("randCode");
167     var rcp = Ext.get(rc.parentNode);
168     //创建新的节点
169     tag:指定为img标签  
170     指定url路径  src:
171     rcp.createChild({tag: 'img', src: 'image.jsp',align:'absbottom'});
172     
173     //新建一个登录窗口
174     var loginWindow = new Ext.Window({
175         width:340,
176         height:180,
177         title:"用户登录",
178         items:loginForm,
179         ///* 用户是否可以调整窗体大小 */  
180         resizable:false,
181         //是否可拖曳
182         draggable:false,
183         //是否允许关闭窗口
184         closable:false,
185         //是否为模式窗口
186         modal:true
187     });
188     loginWindow.show();
189     
190 });

 

 

2.商品信息录入js

 1 function commodityAdd() {
 2     //创建表单
 3     var formPanel = new Ext.form.FormPanel({
 4         bodyStyle:"padding-left:50px",
 5         width:400,
 6         frame:true,
 7         labelAlign:"right",
 8         monitorValid:true,
 9         items:[
10             new Ext.form.TextField({
11                 id:"commodityName",
12                 name:"commodityName",
13                 fieldLabel:"商品名称",
14                 minLength:2,
15                 minLengthText:"商品名称长度不能小于2个字符",
16                 maxLength:12,
17                 maxLengthText:"商品名称长度不能大于12个字符",
18                 allowBlank:false,
19                 blankText:"商品名称不能为空"
20                 
21             }),
22             new Ext.form.NumberField({
23                 id:"price",
24                 name:"price",
25                 fieldLabel:"商品价格",
26                 allowNegative : false,//不允许输入负数
27                 nanText :'请输入有效的整数',//无效数字提示
28                 allowDecimals : true,//允许输入小数
29                 maxValue : 10000000,//最大值
30                 minValue : 0,//最小值
31                 minText:"商品价格不能小于{0}元",
32                 maxText:"商品价格不能大于{0}元",
33                 allowBlank:false,
34                 blankText:"商品价格不能为空"
35             }),
36             new Ext.form.NumberField({
37                 id:"agio",
38                 name:"agio",
39                 fieldLabel:"商品折扣",
40                 allowNegative : false,//不允许输入负数
41                 nanText :'请输入有效的整数',//无效数字提示
42                 allowDecimals : true,//允许输入小数
43                 maxValue : 1,//最大值
44                 minValue : 0,//最小值
45                 minText:"商品折扣不能小于{0}",
46                 maxText:"商品折扣不能大于{0}",
47                 allowBlank:false,
48                 blankText:"商品折扣不能为空"
49             })
50         ],buttons:[
51             {text:"添加",formBind:true,handler:function(){
52                 formPanel.getForm().submit({
53                     url:"commodityAdd.action",
54                     waitMsg:"请稍等,正在添加!",
55                     success:function(form, action){
56                             Ext.MessageBox.alert("成功",action.result.msg); 
57                             formPanel.getForm().reset();
58                      },
59                     failure:function(form, action){
60                             Ext.MessageBox.alert("失败",action.result.msg);      
61                     }
62                 })
63 
64             }},
65             {text:"重置",handler:function(){
66                 formPanel.getForm().reset();
67             }}
68         ]
69     });
70     var commodityAddWindow = new Ext.Window({
71         width:400,
72         height:150,
73         title:"商品信息录入",
74         modal:true,
75         items:formPanel,
76         resizable:false
77     });
78     
79     commodityAddWindow.show();
80 }

 

3.商品信息查询js

 1 function commodityQuery(){
 2     
 3     //创建记录类型,每一行的数据
 4     var commodity = new Ext.data.Record.create([
 5         {name:"commodityId",mapping:"commodityId"},
 6         {name:"commodityName",mapping:"commodityName"},
 7         {name:"price",mapping:"price"},
 8         {name:"agio",mapping:"agio"}
 9     ]);
10     
11     //存储器
12     var store = new Ext.data.Store({
13         url:"commodityQuery.action",  //地址
14         reader:new Ext.data.JsonReader({
15             root:"allCommodity",
16             id:"commodityId",
17             totalProperty:"recordeSize"
18         },commodity)
19     });
20     
21     var gridPanel = new Ext.grid.GridPanel({
22         width:586,
23         height:375,
24         frame:true,
25         store:store,
26         columns:[
27             {header:"商品Id",dateIndex:"commodityId",sortable:true},
28             {header:"商品名称",dateIndex:"commodityName",sortable:true},
29             {header:"价格",dateIndex:"price",sortable:true},
30             {header:"折扣",dateIndex:"agio",sortable:true}
31         ],
32         autoExpandColumn:2,
33         //表格的选择模式，
34         selModel:new Ext.grid.RowSelectionModel({singleSelect:true}),
35         bbar:new Ext.PagingToolbar({
36             pageSize:10,//每页显示多少条记录
37             store:store,//数据源
38             displayInfo:true,
39             displayMsg:"当前显示第{0}条到{1}条记录，一共有{2}条记录",
40             emptyMsg:"没有任何记录",
41             firstText:"首页",
42             prevText:"上一页",
43             nextText:"下一页",
44             lastText:"尾页",
45             refreshText:"刷新"
46         })
47     });
48     store.load({params:{start:0, limit:10}});
49     
50     //新建一个window
51     var commodityQueryWindow = new Ext.Window({
52         width:600,
53         height:400,
54         title:"商品信息查询",
55         resizable:false,
56         modal:true,
57         items:gridPanel
58     });
59     
60     commodityQueryWindow.show();
61 };

 

 

4.vip信息录入js

 1 function vipAdd(){
 2     //创建录入表单
 3     var formPanel = new Ext.FormPanel({
 4         bodyStyle:"padding-left:50px",
 5         width:400,
 6         frame:true,
 7         labelAlign:"right",
 8         monitorValid:true,
 9         items:[
10             new Ext.form.TextField({
11                 id:"name",
12                 name:"name",
13                 fieldLabel:"姓名",
14                 minLength:2,
15                 minLengthText:"姓名长度不能小于2个字符",
16                 maxLength:12,
17                 maxLengthText:"姓名长度不能大于12个字符",
18                 allowBlank:false,
19                 blankText:"姓名不能为空"
20             }),
21             new Ext.form.NumberField({
22                 id:"age",
23                 name:"age",
24                 fieldLabel:"年龄",
25                 allowNegative : false,//不允许输入负数
26                 allowDecimals : false,//不允许输入小树
27                 nanText :'请输入有效的整数',//无效数字提示
28                 maxValue : 100,//最大值
29                 minValue : 1,//最小值
30                 minText:"年龄不能小于{0}岁",
31                 maxText:"年龄不能大于{0}岁",
32                 allowBlank:false,
33                 blankText:"年龄不能为空"
34             }),
35             new Ext.form.TextField({
36                 id:"profession",
37                 name:"profession",
38                 fieldLabel:"职业",
39                 minLength:2,
40                 minLengthText:"职业不能小于2个字符",
41                 maxLength:12,
42                 maxLengthText:"职业不能大于12个字符",
43                 allowBlank:false,
44                 blankText:"职业不能为空"
45 
46             }),
47             new Ext.form.DateField({
48                 id:"joinTime",
49                 name:"joinTime",
50                 width:130,
51                 fieldLabel:"入会时间",
52                 maxValue:"12/31/2010",
53                 minValue:"01/01/2001",
54                 maxText:"支出日期不能大于{0}",
55                 minText:"支出日期不能小于{0}",
56                 format:"Y年m月d日",
57                 allowBlank:false,
58                 blankText:"入会时间不能为空"
59             })
60         ],buttons:[
61             {text:"添加",formBind:true,handler:function(){
62                     formPanel.getForm().submit({
63                     url:"vipAdd.action",
64                     waitMsg:"请稍等,正在添加!",
65                     success:function(form, action){
66                             Ext.MessageBox.alert("成功",action.result.msg); 
67                             formPanel.getForm().reset();
68                         },
69                     failure:function(form, action){
70                             Ext.MessageBox.alert("失败",action.result.msg);      
71                        }
72                 })
73             }},
74             {text:"重置",handler:function(){
75                 formPanel.getForm().reset();
76             }}
77         ]
78     });
79     
80     
81     //创建一个window
82     var vipAddWindow = new Ext.Window({
83         width:400,
84         height:180,
85         title:"VIP信息录入",
86         modal:true,
87         resizable:false,
88         items:formPanel
89     });
90     
91     vipAddWindow.show();
92 }

 

 

5.vip信息查询js

 1 function vipQuery(){
 2     //记录类型
 3     var vip = new Ext.data.Record.create([
 4         {name:"vipId",mapping:"vipId"},
 5         {name:"name",mapping:"name"},
 6         {name:"age",mapping:"age"},
 7         {name:"profession",mapping:"profession"},
 8         {name:"joinTime",mapping:"joinTime",type:"date",dateFormat:"Y-m-dTH:i:s"}
 9     ]);
10     
11     //存储器
12     var store = new Ext.data.Store({
13         url:"vipQuery.action",
14         reader:new Ext.data.JsonReader({
15             id:"vipId",
16             root:"allVip",
17             totalProperty:"recordSize"
18         },vip)
19     });
20     
21     var gridPanel = new Ext.grid.GridPanel({
22         width:585,
23         height:375,
24         frame:true,
25         store:store,
26         columns:[
27             {header:"VIPID",dataIndex:"vipId",sortable:true},
28             {header:"姓名",dataIndex:"name",sortable:true},
29             {header:"年龄",dataIndex:"age",sortable:true},
30             {header:"职业",dataIndex:"profession",sortable:true},
31             {header:"入会时间",dataIndex:"joinTime",sortable:true,renderer:new Ext.util.Format.dateRenderer("Y年m月d日")}
32         ],
33         selModel:new Ext.grid.RowSelectionModel({singleSelect:true}),
34         //分页控制条
35         bbar:new Ext.PagingToolbar({
36             pageSize:10,//每页显示多少条记录
37             store:store,//数据源
38             displayInfo:true,
39             displayMsg:"当前显示第{0}条到{1}条记录，一共有{2}条记录",
40             emptyMsg:"没有任何记录",
41             firstText:"首页",
42             prevText:"上一页",
43             nextText:"下一页",
44             lastText:"尾页",
45             refreshText:"刷新"
46         })
47 
48     });
49     
50     store.load({params:{start:0,limit:10}});
51     
52     var vipQueryWindow = new Ext.Window({
53         width:600,
54         height:400,
55         title:"VIP信息查询",
56         modal:true,
57         resizable:false,
58         items:gridPanel
59     });    
60     
61     vipQueryWindow.show();
62 };

 

 

5.vip消费信息录入js

  1 function consumeAdd(){
  2     //创建表单
  3     var formPanel = new Ext.form.FormPanel({
  4         bodyStyle:"padding-left:50px",
  5         width:400,
  6         frame:true,
  7         labelAlign:"right",
  8         monitorValid:true,
  9         items:[
 10             new Ext.form.NumberField({
 11                 id:"vipId",
 12                 name:"vipId",
 13                 fieldLabel:"vip编号",
 14                 allowNegative : false,//不允许输入负数
 15                 allowDecimals : false,//不允许输入小树
 16                 nanText :'请输入有效的整数',//无效数字提示
 17                 allowBlank:false,
 18                 blankText:"vipId不能为空",
 19                 listeners:{
 20                     "blur":function(field){
 21                         //当前对象的父对象(上级对象) ownerCt
 22                         //查找当前对象的所有下级匹配的组件 findByType
 23                         var name = field.ownerCt.findByType("textfield")[0];
 24                         var vipIdValue = field.value;
 25                         if(vipIdValue != undefined) {
 26                             Ext.Ajax.request({
 27                                 url:"getVip.action",
 28                                 method:"post",
 29                                 params:{
 30                                     vipId:vipIdValue
 31                                 },
 32                                 //指定Ajax请求的回调函数，该函数不管是调用成功或失败，都会执行
 33                                 callback:function(options,success,response) {
 34                                     var jsonStr = Ext.util.JSON.decode(response.responseText);
 35                                     if(jsonStr.success) {
 36                                         name.setValue(jsonStr.vip.name);
 37                                     }else {
 38                                         Ext.MessageBox.alert("失败",jsonStr.msg);
 39                                         name.setValue("");
 40                                     }
 41                                 }
 42                             })
 43                         }
 44                     }
 45                 }
 46             }),
 47             new Ext.form.TextField({
 48                 id:"name",
 49                 name:"name",
 50                 fieldLabel:"姓名",
 51                 minLength:2,
 52                 minLengthText:"姓名长度不能小于2个字符",
 53                 maxLength:12,
 54                 maxLengthText:"姓名长度不能大于12个字符",
 55                 allowBlank:false,
 56                 blankText:"姓名不能为空",
 57                 readOnly:true
 58                 
 59             }),
 60             new Ext.form.NumberField({
 61                 id:"commodityId",
 62                 name:"commodityId",
 63                 fieldLabel:"商品编号",
 64                 allowNegative : false,//不允许输入负数
 65                 allowDecimals : false,//不允许输入小树
 66                 nanText :'请输入有效的整数',//无效数字提示
 67                 allowBlank:false,
 68                 blankText:"commodityId不能为空",
 69                 listeners:{
 70                     "blur":function(field){
 71                         commodityIdValue = field.value
 72                         var commodityName = field.ownerCt.findByType("textfield")[1];
 73                         var price = field.ownerCt.findByType("numberfield")[2];
 74                         var practicePrice = field.ownerCt.findByType("numberfield")[3];
 75                         if(commodityIdValue != undefined) {
 76                             Ext.Ajax.request({
 77                                 url:"getCommodity.action",
 78                                 method:"post",
 79                                 params:{
 80                                     commodityId:commodityIdValue
 81                                 },
 82                                 callback:function(options,success,response) {
 83                                     var jsonStr = Ext.util.JSON.decode(response.responseText);
 84                                     if(jsonStr.success) {
 85                                         commodityName.setValue(jsonStr.commodity.commodityName);
 86                                         price.setValue(jsonStr.commodity.price);
 87                                         practicePrice.setValue(jsonStr.commodity.price * jsonStr.commodity.agio );
 88                                     }else {
 89                                         Ext.MessageBox.alert("失败",jsonStr.msg);
 90                                         commodityName.setValue("");
 91                                         price.setValue("");
 92                                         practicePrice.setValue("");
 93                                     }
 94                                 }
 95                             })
 96                         }
 97                         
 98                     }
 99                 }
100             }),
101             new Ext.form.TextField({
102                 id:"commodityName",
103                 name:"commodityName",
104                 fieldLabel:"商品名称",
105                 minLength:2,
106                 minLengthText:"商品名称长度不能小于2个字符",
107                 maxLength:12,
108                 maxLengthText:"商品名称长度不能大于12个字符",
109                 allowBlank:false,
110                 blankText:"商品名称不能为空",
111                 readOnly:true
112                 
113             }),
114             new Ext.form.NumberField({
115                 id:"price",
116                 name:"price",
117                 fieldLabel:"商品价格",
118                 allowNegative : false,//不允许输入负数
119                 nanText :'请输入有效的整数',//无效数字提示
120                 allowDecimals : true,//允许输入小数
121                 maxValue : 10000000,//最大值
122                 minValue : 0,//最小值
123                 minText:"商品价格不能小于{0}元",
124                 maxText:"商品价格不能大于{0}元",
125                 allowBlank:false,
126                 blankText:"商品价格不能为空",
127                 readOnly:true
128             }),new Ext.form.NumberField({
129                 id:"practicePrice",
130                 name:"practicePrice",
131                 fieldLabel:"商品实际价格",
132                 allowNegative : false,//不允许输入负数
133                 nanText :'请输入有效的整数',//无效数字提示
134                 allowDecimals : true,//允许输入小数
135                 maxValue : 10000000,//最大值
136                 minValue : 0,//最小值
137                 minText:"商品实际价格不能小于{0}元",
138                 maxText:"商品实际价格不能大于{0}元",
139                 allowBlank:false,
140                 blankText:"商品实际价格不能为空",
141                 readOnly:true
142             })
143         ],buttons:[
144             {text:"添加",formBind:true,handler:function(){
145                 formPanel.getForm().submit({
146                     url:"consumeAdd.action",
147                     waitMsg:"请稍等,正在添加!",
148                     success:function(form, action){
149                             Ext.MessageBox.alert("成功",action.result.msg); 
150                             formPanel.getForm().reset();
151                         },
152                     failure:function(form, action){
153                             Ext.MessageBox.alert("失败",action.result.msg);      
154                        }
155                 })
156             }},
157             {text:"重置",handler:function(){
158                 formPanel.getForm().reset();
159             }}
160         ]
161     });
162     
163     var consumeAddWindow = new Ext.Window({
164         width:400,
165         height:230,
166         title:"VIP消费信息录入",
167         resizable:false,
168         modal:true,
169         items:formPanel
170     });    
171     consumeAddWindow.show();
172 }

 

 

6。

 1 function consumeQuery(){
 2     //创建数据类型
 3     var consume = new Ext.data.Record.create([
 4         {name:"consumeId",mapping:"consumeId"},
 5         {name:"vipId",mapping:"vip.vipId"},
 6         {name:"name",mapping:"name"},
 7         {name:"commodityId",mapping:"commodity.commodityId"},
 8         {name:"commodityName",mapping:"commodityName"},
 9         {name:"price",mapping:"price"},
10         {name:"practicePrice",mapping:"practicePrice"}
11     ]);
12     
13     //存储器
14     var store = new Ext.data.Store({
15         url:"consumeQuery.action",
16         reader:new Ext.data.JsonReader({
17             id:"consumeId",
18             root:"allConsume",
19             totalProperty:"recordSize"
20         },consume)
21     });
22     
23     var gridPanel = new Ext.grid.GridPanel({
24         width:585,
25         height:375,
26         frame:true,
27         store:store,
28         columns:[
29             {header:"vipId",dataIndex:"vipId",sortable:true},
30             {header:"姓名",dataIndex:"name",sortable:true},
31             {header:"商品Id",dataIndex:"commodityId",sortable:true},
32             {header:"商品Name",dataIndex:"commodityName",sortable:true},
33             {header:"价格",dataIndex:"price",sortable:true},
34             {header:"实际价格",dataIndex:"practicePrice",sortable:true}
35         ],
36         autoExpandColumn:2,
37         selModel:new Ext.grid.RowSelectionModel({singleSelect:true}),
38         //分页控制条
39         bbar:new Ext.PagingToolbar({
40             pageSize:10,//每页显示多少条记录
41             store:store,//数据源
42             displayInfo:true,
43             displayMsg:"当前显示第{0}条到{1}条记录，一共有{2}条记录",
44             emptyMsg:"没有任何记录",
45             firstText:"首页",
46             prevText:"上一页",
47             nextText:"下一页",
48             lastText:"尾页",
49             refreshText:"刷新"
50         })
51     });
52     
53     store.load({params:{start:0,limit:10}});
54     
55     //新建一个window
56     consumeQueryWindow = new Ext.Window({
57         width:600,
58         height:400,
59         title:"VIP消费信息查询",
60         modal:true,
61         resizable:false,
62         items:gridPanel
63     });
64     consumeQueryWindow.show();
65 }