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 }