90.商城登录页面Extjs

1.

 Ext.onReady(function(){
     Ext.BLANK_IMAGE_URL = "Ext/resources/images/default/s.gif";
     Ext.QuickTips.init();
     Ext.form.Field.prototype.msgTarget="qtip";

     var mainWindow = new Ext.Window({
         width:600,
         height:400,
         title:"商场VIP消费情况查询系统",
         closable:false,
         resizable:false, //设置是否可以改变大小
         draggable:false,  //设置是否可以拖动
         tbar:new Ext.Toolbar({
             height:25
         })
     });
     mainWindow.show();

     //商品信息管理菜单
     var commodityMenu = new Ext.menu.Menu({
         //有效菜单项数组  //有效菜单项数组
         items:[
             {text:"商品信息录入",handler:commodityAdd},
             {text:"商品信息查询",handler:commodityQuery}
         ]
     });

     //VIP信息管理菜单
     var vipMenu = new Ext.menu.Menu({
         items:[
             {text:"VIP信息录入",handler:vipAdd},
             {text:"VIP信息查询",handler:vipQuery},
             {text:"VIP消费信息录入",handler:consumeAdd},
             {text:"VIP消费信息查询",handler:consumeQuery}
         ]
     });

     //
     //getTopToolbar法访问该工具栏
     //SplitButton带分割线的按钮
     mainWindow.getTopToolbar().add(new Ext.SplitButton({
         text:"商品信息管理",
         menu:commodityMenu
     }));

     mainWindow.getTopToolbar().add(new Ext.SplitButton({
         text:"VIP信息管理",
         menu:vipMenu
     }));

     mainWindow.getTopToolbar().add(new Ext.Button({
         text:"系统维护"
     }));

     mainWindow.getTopToolbar().add(new Ext.Button({
         text:"帮助",
         handler:function showHelpWindow(){
             var myToolBar = new Ext.Toolbar({
                 listeners:
                           {
                             'render':function(t)
                             {
                                t.getEl().child("table").wrap({tag:'center'});
                             }
                         },
                 items:[
                     {text:"关闭",handler:function helpWindowClose(){
                             helpWindow.close();
                         }
                     }
                 ]        

             });

             var helpPanel = new Ext.Panel({
                     height:283,
                     html:"<center><font size='3'><B>本系统的主要功能</B></font></center>" +
                             "<h2>◆    登录</h2>" +
                             "本系统为商场VIP消费情况查询系统，具有一定的保密性。因此必须要有一定的权限才能使用本系统查询。要进行查询就必须先登录才能使用本系统。登录之后进入系统的主界面，在主界面可以选择用户想要执行的功能模块。" +
                             "<h2>◆    商品信息录入</h2>" +
                             "在维护本系统时，要不断更新系统的数据。其中商品的信息是在不断增加的，当新进商品时，要保证商品信息的同步更新。在本模块可将新进商品的信息录入保存在服务器的数据库中。" +
                             "<h2>◆    商品信息查询</h2>" +
                             "有时候想了解某种商品的详细信息。在本模块可以查询所想知道的商品的详细信息。",
                     bbar:myToolBar
             });

             var helpWindow = new Ext.Window({
                 width:400,
                 height:300,
                 items:helpPanel,
                 resizable:false,
                 draggable:false,
                 modal:true
             });
             helpWindow.show();
         }
     }));

     mainWindow.getTopToolbar().add(new Ext.Button({
         text:"退出",
         handler:function pExit(){
             window.close();
         }
     }));

     //登录表单面板
     var loginForm = new Ext.FormPanel({
         renderTo:"loginForm",
         id:"loginForm1",
         width:340,
         height:150,
         frame:true,
         labelAlign:"right",
         monitorValid:true,
         items:[
             new Ext.form.TextField({
                 id:"username",
                 name:"username",
                 fieldLabel:"用户名",
                 minLength:3,
                 minLengthText:"用户名长度不能小于{0}",
                 maxLength:12,
                 maxLengthText:"用户名长度不能大于{0}",
                 allowBlank:false,
                 blankText:"用户名必须输入"
             }),
             new Ext.form.TextField({
                 id:"password",
                 name:"password",
                 fieldLabel:"密码",
                 inputType:"password",
                 allowBlank:false,
                 blankText:"密码必须输入"
             }),
             new Ext.form.TextField({
                 id:"randCode",
                 name:"randCode",
                 width:70,
                 fieldLabel:"验证码",
                 allowBlank:false,
                 blankText:"验证码必须输入"
             })
         ],
         buttons:[
             {text:"登录",formBind:true,handler:function(){
                 loginForm.getForm().submit({
                     url:"login.action",
                     waitMsg:"请稍等，系统正在进行登录!",
                     success:function(form, action){
                         Ext.MessageBox.alert("成功",action.result.msg);
                         loginWindow.close();
                     },
                     failure:function(form, action){
                         Ext.MessageBox.alert("失败",action.result.msg);
                     }
                 });
             }},
             {text:"重置",handler:function(){
                 loginForm.form.reset();
             }}
         ]
     });

     var rc = Ext.getDom("randCode");
     var rcp = Ext.get(rc.parentNode);
     //创建新的节点
     ////tag:指定为img标签
     ////指定url路径  src:
     rcp.createChild({tag: 'img', src: 'image.jsp',align:'absbottom'});

     //新建一个登录窗口
     var loginWindow = new Ext.Window({
         width:340,
         height:180,
         title:"用户登录",
         items:loginForm,
         ///* 用户是否可以调整窗体大小 */
         resizable:false,
         //是否可拖曳
         draggable:false,
         //是否允许关闭窗口
         closable:false,
         //是否为模式窗口
         modal:true
     });
     loginWindow.show();

 });

2.商品信息录入js

 function commodityAdd() {
     //创建表单
     var formPanel = new Ext.form.FormPanel({
         bodyStyle:"padding-left:50px",
         width:400,
         frame:true,
         labelAlign:"right",
         monitorValid:true,
         items:[
             new Ext.form.TextField({
                 id:"commodityName",
                 name:"commodityName",
                 fieldLabel:"商品名称",
                 minLength:2,
                 minLengthText:"商品名称长度不能小于2个字符",
                 maxLength:12,
                 maxLengthText:"商品名称长度不能大于12个字符",
                 allowBlank:false,
                 blankText:"商品名称不能为空"

             }),
             new Ext.form.NumberField({
                 id:"price",
                 name:"price",
                 fieldLabel:"商品价格",
                 allowNegative : false,//不允许输入负数
                 nanText :'请输入有效的整数',//无效数字提示
                 allowDecimals : true,//允许输入小数
                 maxValue : 10000000,//最大值
                 minValue : 0,//最小值
                 minText:"商品价格不能小于{0}元",
                 maxText:"商品价格不能大于{0}元",
                 allowBlank:false,
                 blankText:"商品价格不能为空"
             }),
             new Ext.form.NumberField({
                 id:"agio",
                 name:"agio",
                 fieldLabel:"商品折扣",
                 allowNegative : false,//不允许输入负数
                 nanText :'请输入有效的整数',//无效数字提示
                 allowDecimals : true,//允许输入小数
                 maxValue : 1,//最大值
                 minValue : 0,//最小值
                 minText:"商品折扣不能小于{0}",
                 maxText:"商品折扣不能大于{0}",
                 allowBlank:false,
                 blankText:"商品折扣不能为空"
             })
         ],buttons:[
             {text:"添加",formBind:true,handler:function(){
                 formPanel.getForm().submit({
                     url:"commodityAdd.action",
                     waitMsg:"请稍等,正在添加!",
                     success:function(form, action){
                             Ext.MessageBox.alert("成功",action.result.msg);
                             formPanel.getForm().reset();
                      },
                     failure:function(form, action){
                             Ext.MessageBox.alert("失败",action.result.msg);
                     }
                 })

             }},
             {text:"重置",handler:function(){
                 formPanel.getForm().reset();
             }}
         ]
     });
     var commodityAddWindow = new Ext.Window({
         width:400,
         height:150,
         title:"商品信息录入",
         modal:true,
         items:formPanel,
         resizable:false
     });

     commodityAddWindow.show();
 }

3.商品信息查询js

 function commodityQuery(){

     //创建记录类型,每一行的数据
     var commodity = new Ext.data.Record.create([
         {name:"commodityId",mapping:"commodityId"},
         {name:"commodityName",mapping:"commodityName"},
         {name:"price",mapping:"price"},
         {name:"agio",mapping:"agio"}
     ]);

     //存储器
     var store = new Ext.data.Store({
         url:"commodityQuery.action",  //地址
         reader:new Ext.data.JsonReader({
             root:"allCommodity",
             id:"commodityId",
             totalProperty:"recordeSize"
         },commodity)
     });

     var gridPanel = new Ext.grid.GridPanel({
         width:586,
         height:375,
         frame:true,
         store:store,
         columns:[
             {header:"商品Id",dateIndex:"commodityId",sortable:true},
             {header:"商品名称",dateIndex:"commodityName",sortable:true},
             {header:"价格",dateIndex:"price",sortable:true},
             {header:"折扣",dateIndex:"agio",sortable:true}
         ],
         autoExpandColumn:2,
         //表格的选择模式，
         selModel:new Ext.grid.RowSelectionModel({singleSelect:true}),
         bbar:new Ext.PagingToolbar({
             pageSize:10,//每页显示多少条记录
             store:store,//数据源
             displayInfo:true,
             displayMsg:"当前显示第{0}条到{1}条记录，一共有{2}条记录",
             emptyMsg:"没有任何记录",
             firstText:"首页",
             prevText:"上一页",
             nextText:"下一页",
             lastText:"尾页",
             refreshText:"刷新"
         })
     });
     store.load({params:{start:0, limit:10}});

     //新建一个window
     var commodityQueryWindow = new Ext.Window({
         width:600,
         height:400,
         title:"商品信息查询",
         resizable:false,
         modal:true,
         items:gridPanel
     });

     commodityQueryWindow.show();
 };

4.vip信息录入js

 function vipAdd(){
     //创建录入表单
     var formPanel = new Ext.FormPanel({
         bodyStyle:"padding-left:50px",
         width:400,
         frame:true,
         labelAlign:"right",
         monitorValid:true,
         items:[
             new Ext.form.TextField({
                 id:"name",
                 name:"name",
                 fieldLabel:"姓名",
                 minLength:2,
                 minLengthText:"姓名长度不能小于2个字符",
                 maxLength:12,
                 maxLengthText:"姓名长度不能大于12个字符",
                 allowBlank:false,
                 blankText:"姓名不能为空"
             }),
             new Ext.form.NumberField({
                 id:"age",
                 name:"age",
                 fieldLabel:"年龄",
                 allowNegative : false,//不允许输入负数
                 allowDecimals : false,//不允许输入小树
                 nanText :'请输入有效的整数',//无效数字提示
                 maxValue : 100,//最大值
                 minValue : 1,//最小值
                 minText:"年龄不能小于{0}岁",
                 maxText:"年龄不能大于{0}岁",
                 allowBlank:false,
                 blankText:"年龄不能为空"
             }),
             new Ext.form.TextField({
                 id:"profession",
                 name:"profession",
                 fieldLabel:"职业",
                 minLength:2,
                 minLengthText:"职业不能小于2个字符",
                 maxLength:12,
                 maxLengthText:"职业不能大于12个字符",
                 allowBlank:false,
                 blankText:"职业不能为空"

             }),
             new Ext.form.DateField({
                 id:"joinTime",
                 name:"joinTime",
                 width:130,
                 fieldLabel:"入会时间",
                 maxValue:"12/31/2010",
                 minValue:"01/01/2001",
                 maxText:"支出日期不能大于{0}",
                 minText:"支出日期不能小于{0}",
                 format:"Y年m月d日",
                 allowBlank:false,
                 blankText:"入会时间不能为空"
             })
         ],buttons:[
             {text:"添加",formBind:true,handler:function(){
                     formPanel.getForm().submit({
                     url:"vipAdd.action",
                     waitMsg:"请稍等,正在添加!",
                     success:function(form, action){
                             Ext.MessageBox.alert("成功",action.result.msg);
                             formPanel.getForm().reset();
                         },
                     failure:function(form, action){
                             Ext.MessageBox.alert("失败",action.result.msg);
                        }
                 })
             }},
             {text:"重置",handler:function(){
                 formPanel.getForm().reset();
             }}
         ]
     });

     //创建一个window
     var vipAddWindow = new Ext.Window({
         width:400,
         height:180,
         title:"VIP信息录入",
         modal:true,
         resizable:false,
         items:formPanel
     });

     vipAddWindow.show();
 }

5.vip信息查询js

 function vipQuery(){
     //记录类型
     var vip = new Ext.data.Record.create([
         {name:"vipId",mapping:"vipId"},
         {name:"name",mapping:"name"},
         {name:"age",mapping:"age"},
         {name:"profession",mapping:"profession"},
         {name:"joinTime",mapping:"joinTime",type:"date",dateFormat:"Y-m-dTH:i:s"}
     ]);

     //存储器
     var store = new Ext.data.Store({
         url:"vipQuery.action",
         reader:new Ext.data.JsonReader({
             id:"vipId",
             root:"allVip",
             totalProperty:"recordSize"
         },vip)
     });

     var gridPanel = new Ext.grid.GridPanel({
         width:585,
         height:375,
         frame:true,
         store:store,
         columns:[
             {header:"VIPID",dataIndex:"vipId",sortable:true},
             {header:"姓名",dataIndex:"name",sortable:true},
             {header:"年龄",dataIndex:"age",sortable:true},
             {header:"职业",dataIndex:"profession",sortable:true},
             {header:"入会时间",dataIndex:"joinTime",sortable:true,renderer:new Ext.util.Format.dateRenderer("Y年m月d日")}
         ],
         selModel:new Ext.grid.RowSelectionModel({singleSelect:true}),
         //分页控制条
         bbar:new Ext.PagingToolbar({
             pageSize:10,//每页显示多少条记录
             store:store,//数据源
             displayInfo:true,
             displayMsg:"当前显示第{0}条到{1}条记录，一共有{2}条记录",
             emptyMsg:"没有任何记录",
             firstText:"首页",
             prevText:"上一页",
             nextText:"下一页",
             lastText:"尾页",
             refreshText:"刷新"
         })

     });

     store.load({params:{start:0,limit:10}});

     var vipQueryWindow = new Ext.Window({
         width:600,
         height:400,
         title:"VIP信息查询",
         modal:true,
         resizable:false,
         items:gridPanel
     });    

     vipQueryWindow.show();
 };

5.vip消费信息录入js

 function consumeAdd(){
     //创建表单
     var formPanel = new Ext.form.FormPanel({
         bodyStyle:"padding-left:50px",
         width:400,
         frame:true,
         labelAlign:"right",
         monitorValid:true,
         items:[
             new Ext.form.NumberField({
                 id:"vipId",
                 name:"vipId",
                 fieldLabel:"vip编号",
                 allowNegative : false,//不允许输入负数
                 allowDecimals : false,//不允许输入小树
                 nanText :'请输入有效的整数',//无效数字提示
                 allowBlank:false,
                 blankText:"vipId不能为空",
                 listeners:{
                     "blur":function(field){
                         //当前对象的父对象(上级对象) ownerCt
                         //查找当前对象的所有下级匹配的组件 findByType
                         var name = field.ownerCt.findByType("textfield")[0];
                         var vipIdValue = field.value;
                         if(vipIdValue != undefined) {
                             Ext.Ajax.request({
                                 url:"getVip.action",
                                 method:"post",
                                 params:{
                                     vipId:vipIdValue
                                 },
                                 //指定Ajax请求的回调函数，该函数不管是调用成功或失败，都会执行
                                 callback:function(options,success,response) {
                                     var jsonStr = Ext.util.JSON.decode(response.responseText);
                                     if(jsonStr.success) {
                                         name.setValue(jsonStr.vip.name);
                                     }else {
                                         Ext.MessageBox.alert("失败",jsonStr.msg);
                                         name.setValue("");
                                     }
                                 }
                             })
                         }
                     }
                 }
             }),
             new Ext.form.TextField({
                 id:"name",
                 name:"name",
                 fieldLabel:"姓名",
                 minLength:2,
                 minLengthText:"姓名长度不能小于2个字符",
                 maxLength:12,
                 maxLengthText:"姓名长度不能大于12个字符",
                 allowBlank:false,
                 blankText:"姓名不能为空",
                 readOnly:true

             }),
             new Ext.form.NumberField({
                 id:"commodityId",
                 name:"commodityId",
                 fieldLabel:"商品编号",
                 allowNegative : false,//不允许输入负数
                 allowDecimals : false,//不允许输入小树
                 nanText :'请输入有效的整数',//无效数字提示
                 allowBlank:false,
                 blankText:"commodityId不能为空",
                 listeners:{
                     "blur":function(field){
                         commodityIdValue = field.value
                         var commodityName = field.ownerCt.findByType("textfield")[1];
                         var price = field.ownerCt.findByType("numberfield")[2];
                         var practicePrice = field.ownerCt.findByType("numberfield")[3];
                         if(commodityIdValue != undefined) {
                             Ext.Ajax.request({
                                 url:"getCommodity.action",
                                 method:"post",
                                 params:{
                                     commodityId:commodityIdValue
                                 },
                                 callback:function(options,success,response) {
                                     var jsonStr = Ext.util.JSON.decode(response.responseText);
                                     if(jsonStr.success) {
                                         commodityName.setValue(jsonStr.commodity.commodityName);
                                         price.setValue(jsonStr.commodity.price);
                                         practicePrice.setValue(jsonStr.commodity.price * jsonStr.commodity.agio );
                                     }else {
                                         Ext.MessageBox.alert("失败",jsonStr.msg);
                                         commodityName.setValue("");
                                         price.setValue("");
                                         practicePrice.setValue("");
                                     }
                                 }
                             })
                         }

                     }
                 }
             }),
             new Ext.form.TextField({
                 id:"commodityName",
                 name:"commodityName",
                 fieldLabel:"商品名称",
                 minLength:2,
                 minLengthText:"商品名称长度不能小于2个字符",
                 maxLength:12,
                 maxLengthText:"商品名称长度不能大于12个字符",
                 allowBlank:false,
                 blankText:"商品名称不能为空",
                 readOnly:true

             }),
             new Ext.form.NumberField({
                 id:"price",
                 name:"price",
                 fieldLabel:"商品价格",
                 allowNegative : false,//不允许输入负数
                 nanText :'请输入有效的整数',//无效数字提示
                 allowDecimals : true,//允许输入小数
                 maxValue : 10000000,//最大值
                 minValue : 0,//最小值
                 minText:"商品价格不能小于{0}元",
                 maxText:"商品价格不能大于{0}元",
                 allowBlank:false,
                 blankText:"商品价格不能为空",
                 readOnly:true
             }),new Ext.form.NumberField({
                 id:"practicePrice",
                 name:"practicePrice",
                 fieldLabel:"商品实际价格",
                 allowNegative : false,//不允许输入负数
                 nanText :'请输入有效的整数',//无效数字提示
                 allowDecimals : true,//允许输入小数
                 maxValue : 10000000,//最大值
                 minValue : 0,//最小值
                 minText:"商品实际价格不能小于{0}元",
                 maxText:"商品实际价格不能大于{0}元",
                 allowBlank:false,
                 blankText:"商品实际价格不能为空",
                 readOnly:true
             })
         ],buttons:[
             {text:"添加",formBind:true,handler:function(){
                 formPanel.getForm().submit({
                     url:"consumeAdd.action",
                     waitMsg:"请稍等,正在添加!",
                     success:function(form, action){
                             Ext.MessageBox.alert("成功",action.result.msg);
                             formPanel.getForm().reset();
                         },
                     failure:function(form, action){
                             Ext.MessageBox.alert("失败",action.result.msg);
                        }
                 })
             }},
             {text:"重置",handler:function(){
                 formPanel.getForm().reset();
             }}
         ]
     });

     var consumeAddWindow = new Ext.Window({
         width:400,
         height:230,
         title:"VIP消费信息录入",
         resizable:false,
         modal:true,
         items:formPanel
     });
     consumeAddWindow.show();
 }

6。

 function consumeQuery(){
     //创建数据类型
     var consume = new Ext.data.Record.create([
         {name:"consumeId",mapping:"consumeId"},
         {name:"vipId",mapping:"vip.vipId"},
         {name:"name",mapping:"name"},
         {name:"commodityId",mapping:"commodity.commodityId"},
         {name:"commodityName",mapping:"commodityName"},
         {name:"price",mapping:"price"},
         {name:"practicePrice",mapping:"practicePrice"}
     ]);

     //存储器
     var store = new Ext.data.Store({
         url:"consumeQuery.action",
         reader:new Ext.data.JsonReader({
             id:"consumeId",
             root:"allConsume",
             totalProperty:"recordSize"
         },consume)
     });

     var gridPanel = new Ext.grid.GridPanel({
         width:585,
         height:375,
         frame:true,
         store:store,
         columns:[
             {header:"vipId",dataIndex:"vipId",sortable:true},
             {header:"姓名",dataIndex:"name",sortable:true},
             {header:"商品Id",dataIndex:"commodityId",sortable:true},
             {header:"商品Name",dataIndex:"commodityName",sortable:true},
             {header:"价格",dataIndex:"price",sortable:true},
             {header:"实际价格",dataIndex:"practicePrice",sortable:true}
         ],
         autoExpandColumn:2,
         selModel:new Ext.grid.RowSelectionModel({singleSelect:true}),
         //分页控制条
         bbar:new Ext.PagingToolbar({
             pageSize:10,//每页显示多少条记录
             store:store,//数据源
             displayInfo:true,
             displayMsg:"当前显示第{0}条到{1}条记录，一共有{2}条记录",
             emptyMsg:"没有任何记录",
             firstText:"首页",
             prevText:"上一页",
             nextText:"下一页",
             lastText:"尾页",
             refreshText:"刷新"
         })
     });

     store.load({params:{start:0,limit:10}});

     //新建一个window
     consumeQueryWindow = new Ext.Window({
         width:600,
         height:400,
         title:"VIP消费信息查询",
         modal:true,
         resizable:false,
         items:gridPanel
     });
     consumeQueryWindow.show();
 }