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({
        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({
                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",
        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",
                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({
        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",
        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({
        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({
        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({
        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",
        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",
                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({
        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({
        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({
        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",
        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({
        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({
        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({
        600,
        height:400,
        title:"VIP消费信息查询",
        modal:true,
        resizable:false,
        items:gridPanel
    });
    consumeQueryWindow.show();
}