90.商城登录页面Extjs
2024-08-31 03:28:21
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();
}
最新文章
- Windows Phone 四、控件模版
- nfc相关
- Swift处理堆栈问题——给定两组序列，其中一个序列表示栈的push 顺序，判断另一个序列有没有可能是对应的pop 顺序
- linux的零碎使用
- 沉浸式状态栏_boolean hasTopLine = a.getBoolean(1, false);//AS会在"1"下显示错误红线
- 关于placeholder中 文字添加换行 用转义字符&#13;&#10;代替<br>
- 那些情况该使用它们spin_lock到spin_lock_irqsave【转】
- sql 查询结果中加入空值列
- iOS 使用Method Swizzling隐藏Status Bar
- web前段2017.6.8
- 谈谈Ext JS的组件——布局的使用方法续一
- python使用http、https代理
- Processing3 1.随机行走
- AttributeError: 'int' object has no attribute 'isdigit'（python下的isdigit函数）
- RabbitMQ 延时消息设计
- jQuery 与 或 的坑
- foxmail占cpu 100%解决办法
- Android开发小问题解决汇总
- ThinkPHP联表查询
- ThinPHP3.2中 addAll()批量插入数据