JSP+Ext实现CURD, 更简洁明了

关键字：JSP与Ext实现CURD,

Js代码
/* 
* MemberManage.js 
* @author zuoming99 
*/ 
 
Ext.onReady(function(){  
    Ext.QuickTips.init();  
 
    var fm = Ext.form;  
    var sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown: Ext.emptyFn});  
 
    var cm = new Ext.grid.ColumnModel([  
        sm,{  
            header:'ID',  
            dataIndex:'id',  
            width:40  
        },{  
            header: "姓名",  
            dataIndex: 'name',  
            editor: new fm.TextField({  
                allowBlank: false 
            })  
        },{  
            header:'性别',  
            dataIndex:'sex',  
            width:60,  
            align:'center',  
            renderer:function(v){  
                return '<img src="images/'+v+'.png"/>'+(v=='m'?'男':'女');  
            },  
            editor:new fm.ComboBox({  
                typeAhead: true,  
                triggerAction: 'all',  
                transform:'sexSelect',  
                lazyRender:true,  
                readOnly:true,  
                listClass: 'x-combo-list-small' 
            })  
        },{  
            header:'年龄',  
            dataIndex:'age',  
            width:50,  
            align:'right',  
            renderer:function(v){  
                var code = '<span style="color:';  
                if(v<=25){  
                    code += '#008000';  
                }else if(v>25 && v<=30){  
                    code += '#CC6600';  
                }else if(v>30){  
                    code += '#804000';  
                }  
                return code+';">'+v+'</span>';  
            },  
            editor: new fm.NumberField({  
                allowBlank:false,  
                allowNegative: false,  
                allowDecimals: false,  
                maxValue:60,  
                minValue:18  
            })  
        },{  
            header: "生日",  
            dataIndex: 'birth',  
            renderer: function(v){  
                return v ? v.dateFormat('Y年m月d日') : '';  
            },  
            editor: new fm.DateField({  
                format: 'Y-m-d',  
                minValue: '1800-01-01',  
                readOnly:true,  
                disabledDays: [0, 6],  
                disabledDaysText: '请不要选择周末' 
            })  
        }  
    ]);  
 
    cm.defaultSortable = true;  
 
    var Member = Ext.data.Record.create([  
           {name: 'id', type: 'int'},  
           {name: 'name', type: 'string'},  
           {name: 'sex'},  
           {name: 'age',type:'int'},  
           {name: 'birth', type: 'date', dateFormat: 'Y-m-d'}  
      ]);  
 
    var store = new Ext.data.JsonStore({  
        url:'./member_manage.jsp',  
        baseParams:{command:'query'},  
        totalProperty:'count',  
        root:'members',  
        fields:Member,  
        pruneModifiedRecords:true,  
        sortInfo: {field: "id", direction: "ASC"} //设置默认排序规则, EditorGridPanel在新增加一行却未保存时如果点击header排序会出现'行142字符6983,modified为空或不是对象'  
    });  
 
    //表单窗体  
    var memberAddWindow;  
 
    var grid = new Ext.grid.EditorGridPanel({  
        store: store,  
        cm: cm,  
        renderTo: 'member_grid',  
        resizeable:true,  
        width:640,  
        height:480,  
        title:'员工管理',  
        frame:true,  
        clicksToEdit:1,  
        sm:sm,  
        iconCls:'icon-grid',  
        loadMask: true,  
        stripeRows:true,  
        tbar:[  
        {// 添加按钮  
            text:'添加',  
            iconCls:'user_add',  
            handler:function(){  
                var m = new Member({  
                    name:'新员工',  
                    sex:'m',  
                    age:'20',  
                    birth:new Date().clearTime()  
                });  
                grid.stopEditing();  
                store.insert(0, m);  
                grid.startEditing(0, 2);  
                store.getAt(0).dirty=true; // 设置该行记录为脏数据(默认为非脏数据),否则在保存时将无法判断该行是否已修改  
            }  
        },'-',{  
            id:'newWindowButton',  
            text:'新面板中添加',  
            iconCls:'user_add',  
            handler:function(){  
                showMemerAddWindow(); //显示表单所在窗体  
            }  
        },'-',{//删除按钮  
            id:'btnDelete',  
            text:'删除',  
            iconCls:'user_delete',  
            handler:function(){  
                var sm = grid.getSelectionModel();  
                var selected = sm.getSelections();  
                var ids = [];  
                for(var i=0;i<selected.length;i+=1){  
                    var member = selected[i].data;  
                    if(member.id) {  
                        ids.push(member.id); //如果有ID属性,则表示该行数据是被修改过的,所以需要访问数据库进行删除  
                    }else{  
                        //如果没有ID属性,则表示该行数据是新添加的未保存的数据,所以不需要访问数据库进行删除该行  
                        store.remove(store.getAt(i));  
                    }  
                }  
                if(ids.join('')=='') return;  
                  
                Ext.Msg.confirm('信息','确定要删除所选项吗?',function(btn){  
                    if(btn=='yes'){  
                        //发送删除请求  
                        Ext.lib.Ajax.request(  
                            'POST',  
                            './member_manage.jsp',{  
                                success:function(request){  
                                    var message = request.responseText;  
                                    Ext.Msg.alert('信息',message);  
                                    store.reload();  
                                },failure:function(){  
                                    Ext.Msg.alert('错误','删除时出现未知错误.');  
                                }  
                            },  
                            'command=delete&ids='+ids  
                        );  
                    }  
                });  
            }  
        },'-',{//保存按钮  
            text:'保存',  
            iconCls:'save',  
            handler:function(){  
                var json = [];  
                for(i=0,cnt=store.getCount();i<cnt;i+=1){  
                    var record = store.getAt(i);  
                    if(record.dirty) // 得到所有修改过的数据  
                        json.push(record.data);  
                }  
                if(json.length==0){  
                    Ext.Msg.alert('信息','没有对数据进行任何更改');  
                    return;  
                }  
                  
                //发送保存请求  
                Ext.lib.Ajax.request(  
                    'POST',  
                    './member_manage.jsp',{  
                        success:function(request){  
                            var message = request.responseText;  
                            Ext.Msg.alert('信息',message);  
                            store.reload();  
                            //grid.getView().refresh();  
                        },  
                        failure:function(){  
                            Ext.Msg.alert("错误", "与后台联系的时候出现了问题");  
                        }  
                    },  
                    'command=save&members='+encodeURIComponent(Ext.encode(json))  
                );  
            }  
        },'-'],  
        bbar: new Ext.PagingToolbar({  
            pageSize: 10,  
            store: store,  
            displayInfo: true,  
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',  
            emptyMsg: "没有记录" 
        })  
 
    });  
    store.load({params:{start:0,limit:10}});  
      
      
      
    /** 
     * 以下是表单 __________________________________________________ 
     * */ 
 
    //姓名字段  
    var nameField = new Ext.form.TextField({  
        fieldLabel:'姓名',  
        name:'memberName',  
        allowBlank:false,  
        anchor:'90%' 
    });  
    //性别字段  
    var sexField = new Ext.form.ComboBox({  
        fieldLabel:'性别',  
        name:'sex',  
        allowBlank:false,  
        mode: 'local',  
        readOnly:true,  
        triggerAction:'all',  
        anchor:'90%',  
        store:new Ext.data.SimpleStore({  
            fields:['value','text'],  
            data:[  
                ['m','男'],  
                ['f','女']  
            ]  
        }),  
        valueField: 'value',  
        displayField: 'text' 
    });  
    //年龄字段  
    var ageField = new Ext.form.NumberField({  
        fieldLabel:'年龄',  
        name:'age',  
        allowBlank:false,  
        allowNegative:false,  
        allowDesimals:false,  
        maxValue:80,  
        minValue:18,  
        anchor:'90%' 
    });  
    //生日字段  
    var birthField = new Ext.form.DateField({  
        fieldLabel:'出生日期',  
        name:'birth',  
        format:'Y-m-d',  
        readOnly:true,  
        anchor:'90%' 
    });  
    //表单对象  
    var memberForm = new Ext.FormPanel({  
        labelAlign: 'top',  
        frame:true,  
        title: '添加新员工信息',  
        width: 300,  
        url:'./member_manage.jsp?command=insert',  
          
        items: [{  
            layout:'column',// 该FormPanel的layout布局模式为列模式(column),包含2列  
            items:[  
            {//第一列  
                columnWidth:0.5,  
                layout: 'form',  
                items: [nameField,sexField]  
            },{//第二列  
                columnWidth:0.5,  
                layout: 'form',  
                items: [ageField,birthField]  
            }]  
        }],  
        buttons:[{  
            text:'提交',  
            handler:function(){  
                if(memberForm.getForm().isValid())  
                    memberForm.getForm().submit({  
                        waitMsg:'保存中,请稍后...',  
                        success:function(){  
                            memberForm.getForm().reset();  
                            memberAddWindow.hide();  
                            store.reload();  
                        }  
                    });  
            }  
        },{  
            text:'取消',  
            handler:function(){  
                memberForm.getForm().reset();  
                memberAddWindow.hide();  
            }  
        }]  
    });  
      
    //窗体对象  
    function showMemerAddWindow(){  
        if(!memberAddWindow){  
            memberAddWindow = new Ext.Window({  
                el:'window_win',  
                layout:'fit',  
                width:300,  
                height:200,  
                closable:true,  
                closeAction:'hide',  
                plain:true,  
                items: [memberForm]  
            });  
        }  
        memberAddWindow.show(Ext.get('newWindowButton'));  
    }  
}); 

/*
* MemberManage.js
* @author zuoming99
*/

Ext.onReady(function(){
    Ext.QuickTips.init();

    var fm = Ext.form;
var sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown: Ext.emptyFn});

    var cm = new Ext.grid.ColumnModel([
sm,{
header:'ID',
dataIndex:'id',
width:40
},{
header: "姓名",
dataIndex: 'name',
editor: new fm.TextField({
allowBlank: false
})
        },{
header:'性别',
dataIndex:'sex',
width:60,
align:'center',
renderer:function(v){
return '<img src="images/'+v+'.png"/>'+(v=='m'?'男':'女');
},
editor:new fm.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'sexSelect',
lazyRender:true,
    readOnly:true,
listClass: 'x-combo-list-small'
})
},{
header:'年龄',
dataIndex:'age',
width:50,
align:'right',
renderer:function(v){
var code = '<span style="color:';
if(v<=25){
code += '#008000';
}else if(v>25 && v<=30){
code += '#CC6600';
}else if(v>30){
code += '#804000';
}
return code+';">'+v+'</span>';
},
editor: new fm.NumberField({
allowBlank:false,
allowNegative: false,
allowDecimals: false,
maxValue:60,
minValue:18
})
},{
header: "生日",
dataIndex: 'birth',
renderer: function(v){
return v ? v.dateFormat('Y年m月d日') : '';
},
editor: new fm.DateField({
format: 'Y-m-d',
minValue: '1800-01-01',
readOnly:true,
disabledDays: [0, 6],
disabledDaysText: '请不要选择周末'
})
        }
    ]);

    cm.defaultSortable = true;

    var Member = Ext.data.Record.create([
           {name: 'id', type: 'int'},
           {name: 'name', type: 'string'},
   {name: 'sex'},
   {name: 'age',type:'int'},
           {name: 'birth', type: 'date', dateFormat: 'Y-m-d'}
      ]);

var store = new Ext.data.JsonStore({
url:'./member_manage.jsp',
baseParams:{command:'query'},
totalProperty:'count',
root:'members',
fields:Member,
pruneModifiedRecords:true,
sortInfo: {field: "id", direction: "ASC"} //设置默认排序规则, EditorGridPanel在新增加一行却未保存时如果点击header排序会出现'行142字符6983,modified为空或不是对象'
});

//表单窗体
var memberAddWindow;

    var grid = new Ext.grid.EditorGridPanel({
        store: store,
        cm: cm,
        renderTo: 'member_grid',
        resizeable:true,
width:640,
        height:480,
        title:'员工管理',
        frame:true,
        clicksToEdit:1,
sm:sm,
iconCls:'icon-grid',
loadMask: true,
stripeRows:true,
tbar:[
{// 添加按钮
text:'添加',
iconCls:'user_add',
handler:function(){
var m = new Member({
name:'新员工',
sex:'m',
age:'20',
birth:new Date().clearTime()
});
grid.stopEditing();
store.insert(0, m);
grid.startEditing(0, 2);
store.getAt(0).dirty=true; // 设置该行记录为脏数据(默认为非脏数据),否则在保存时将无法判断该行是否已修改
}
},'-',{
id:'newWindowButton',
text:'新面板中添加',
iconCls:'user_add',
handler:function(){
    showMemerAddWindow(); //显示表单所在窗体
}
},'-',{//删除按钮
id:'btnDelete',
text:'删除',
iconCls:'user_delete',
handler:function(){
var sm = grid.getSelectionModel();
var selected = sm.getSelections();
var ids = [];
for(var i=0;i<selected.length;i+=1){
var member = selected[i].data;
if(member.id) {
ids.push(member.id); //如果有ID属性,则表示该行数据是被修改过的,所以需要访问数据库进行删除
}else{
//如果没有ID属性,则表示该行数据是新添加的未保存的数据,所以不需要访问数据库进行删除该行
store.remove(store.getAt(i));
}
}
if(ids.join('')=='') return;

Ext.Msg.confirm('信息','确定要删除所选项吗?',function(btn){
if(btn=='yes'){
//发送删除请求
Ext.lib.Ajax.request(
'POST',
'./member_manage.jsp',{
success:function(request){
var message = request.responseText;
Ext.Msg.alert('信息',message);
store.reload();
},failure:function(){
Ext.Msg.alert('错误','删除时出现未知错误.');
}
},
'command=delete&ids='+ids
);
}
});
}
},'-',{//保存按钮
text:'保存',
iconCls:'save',
handler:function(){
var json = [];
for(i=0,cnt=store.getCount();i<cnt;i+=1){
var record = store.getAt(i);
if(record.dirty) // 得到所有修改过的数据
json.push(record.data);
}
if(json.length==0){
Ext.Msg.alert('信息','没有对数据进行任何更改');
return;
}

//发送保存请求
Ext.lib.Ajax.request(
'POST',
'./member_manage.jsp',{
success:function(request){
var message = request.responseText;
Ext.Msg.alert('信息',message);
store.reload();
//grid.getView().refresh();
},
failure:function(){
Ext.Msg.alert("错误", "与后台联系的时候出现了问题");
}
},
'command=save&members='+encodeURIComponent(Ext.encode(json))
);
}
},'-'],
    bbar: new Ext.PagingToolbar({
        pageSize: 10,
        store: store,
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
        emptyMsg: "没有记录"
    })

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



/**
* 以下是表单 __________________________________________________
* */

//姓名字段
var nameField = new Ext.form.TextField({
fieldLabel:'姓名',
name:'memberName',
allowBlank:false,
        anchor:'90%'
});
//性别字段
var sexField = new Ext.form.ComboBox({
fieldLabel:'性别',
name:'sex',
allowBlank:false,
    mode: 'local',
    readOnly:true,
    triggerAction:'all',
    anchor:'90%',
store:new Ext.data.SimpleStore({
fields:['value','text'],
data:[
['m','男'],
['f','女']
]
}),
valueField: 'value',
    displayField: 'text'
});
//年龄字段
var ageField = new Ext.form.NumberField({
fieldLabel:'年龄',
name:'age',
allowBlank:false,
allowNegative:false,
allowDesimals:false,
maxValue:80,
minValue:18,
    anchor:'90%'
});
//生日字段
var birthField = new Ext.form.DateField({
fieldLabel:'出生日期',
name:'birth',
format:'Y-m-d',
readOnly:true,
    anchor:'90%'
});
//表单对象
    var memberForm = new Ext.FormPanel({
        labelAlign: 'top',
        frame:true,
        title: '添加新员工信息',
        width: 300,
        url:'./member_manage.jsp?command=insert',
       
        items: [{
            layout:'column',// 该FormPanel的layout布局模式为列模式(column),包含2列
            items:[
            {//第一列
                columnWidth:0.5,
                layout: 'form',
                items: [nameField,sexField]
            },{//第二列
                columnWidth:0.5,
                layout: 'form',
                items: [ageField,birthField]
            }]
        }],
        buttons:[{
        text:'提交',
        handler:function(){
        if(memberForm.getForm().isValid())
        memberForm.getForm().submit({
        waitMsg:'保存中,请稍后...',
        success:function(){
        memberForm.getForm().reset();
        memberAddWindow.hide();
        store.reload();
        }
        });
        }
    },{
    text:'取消',
    handler:function(){
    memberForm.getForm().reset();
    memberAddWindow.hide();
    }
    }]
    });
   
    //窗体对象
    function showMemerAddWindow(){
    if(!memberAddWindow){
memberAddWindow = new Ext.Window({
    el:'window_win',
    layout:'fit',
    width:300,
    height:200,
    closable:true,
    closeAction:'hide',
        plain:true,
    items: [memberForm]
});
    }
memberAddWindow.show(Ext.get('newWindowButton'));
    }
});






Js代码
/** 
*  
* SignManage.js 
* @author zuoming99 
*  
* */ 
    
Ext.onReady(function(){  
    //初始化鼠标提示  
    Ext.QuickTips.init();  
      
    //Record  
    var Sign = Ext.data.Record.create([  
        //{name:'id',type:'int'},  
        {name:'signDate',type:'date',dateFormat:'Y-m-d'}, //数据读取模式为 2008-1-1  
        {name:'signTime',type:'string'},  
        {name:'cname',type:'string'}  
    ]);  
      
    var today = new Date().dateFormat('Y-m-d');  
    var week = ['天','一','二','三','四','五','六'];  
    function getWeek(ymd){ //得到星期几,参数格式2008-01-01  
        ymd = ymd.split('-');  
        var date = new Date();  
        date.setFullYear(eval(ymd[0]));  
        date.setMonth(eval(ymd[1])-1);  
        date.setDate(eval(ymd[2]));  
        return '星期'+week[date.getDay()];  
    }  
 
    //数据储备器  
    var signStore = new Ext.data.JsonStore({  
        url:'./sign_control.jsp',  
        baseParams:{startDate:today,endDate:today,command:'query'},  
        //totalProperty:'count',  
        root:'records',  
        fields:Sign,  
        sortInfo:{field:'signTime',direction:'ASC'}  
    });  
    //全选Checkbox  
    var sm = new Ext.grid.CheckboxSelectionModel({singleSelect:false});  
      
    //列模型  
    var columnModel = new Ext.grid.ColumnModel([  
        sm,  
        new Ext.grid.RowNumberer(),{  
            header:'姓名',  
            dataIndex:'cname',  
            width:100  
        },{  
            header:'签到时间',  
            dataIndex:'signTime',  
            width:80,  
            renderer:function(v){  
                if(v<='09:00')   
                    return '<span class="green">'+v+'</span>';  
                else 
                    return '<span class="red">'+v+'</span>';  
            }  
        },{  
            header:'工作日',  
            dataIndex:'signDate',  
            width:80,  
            renderer:function(v){  
                //显示模式为2008-01-01  
                return v ? v.dateFormat('Y-m-d') : '';  
            }  
        },{  
            header:'星期',  
            dataIndex:'signDate',  
            width:80,  
            renderer:function(v){  
                v = v.dateFormat('Y-m-d')  
                return getWeek(v);  
            }  
        }  
    ]);  
    columnModel.defaultSortable=true;  
      
    //进行签到  
    function doSign(){  
        var signTime = new Date().toString().substr(10,5);  
        Ext.Ajax.request({  
            url:'./sign_control.jsp?command=sign&signTime='+signTime,  
            success:function(request){  
                var userInfo = eval('('+request.responseText.trim()+')');  
                if(userInfo.success===true){  
                    signStore.reload();  
                    btnSign.disable();  
                }  
            },  
            failure:function(){  
                Ext.Msg.alert('错误','无法链接服务器.');  
            }  
        });  
    }  
      
    //查询-开始日期  
    var sdField = new Ext.form.DateField({  
        id:'startDate',  
        name:'startDate',  
        format:'Y-m-d',  
        minValue:'2008-02-01',  
        maxValue:'2009-12-31',  
        allowBlank:false,  
        value:today  
    });  
    //查询-结束日期  
    var edField = new Ext.form.DateField({  
        id:'endDate',  
        name:'endDate',  
        format:'Y-m-d',  
        minValue:'2008-02-01',  
        maxValue:'2009-12-31',  
        allowBlank:false,  
        value:today  
    });  
      
    //查询按钮  
    var btnSearch = new Ext.Button({  
        text:'查询',  
        iconCls:'icon-search',  
        handler:function(){  
            if(sdField.isValid() && edField.isValid()){  
                signStore.baseParams.startDate=sdField.getValue().dateFormat('Y-m-d');  
                signStore.baseParams.endDate=edField.getValue().dateFormat('Y-m-d');  
            }  
            signStore.load();  
        }  
    });  
      
    //登录按钮  
    var btnLogon = new Ext.Button({  
        id:'btnLogon',  
        text:'登录',  
        iconCls:'icon-logon',  
        handler:function(){  
            logonWin.show('btnLogon');  
        }  
    });  
      
    //签到按钮  
    var btnSign = new Ext.Button({  
        id:'btnSign',  
        text:'签到',  
        iconCls:'icon-sign',  
        handler:doSign  
    });  
      
    //修改密码按钮  
    var btnChangePwd = new Ext.Button({  
        id:'btnChangePwd',  
        text:'修改密码',  
        iconCls:'icon-logon',  
        handler:function(){  
            changePwdWin.show('btnChangePwd');  
        }  
    });  
      
    //退出按钮  
    var btnLogout = new Ext.Button({  
        id:'btnLogout',  
        text:'退出',  
        iconCls:'icon-logout',  
        handler:function(){  
            Ext.Ajax.request({  
                url:'./sign_control.jsp?command=logout',  
                success:function(){  
                    btnLogon.enable();  
                    btnLogout.disable();  
                    btnSign.disable();  
                    btnChangePwd.disable();  
                },  
                failure:function(){  
                    Ext.Msg.alert('错误','无法链接服务器.');  
                }  
            });  
        }  
    });  
      
    //导出按钮  
    var btnExport = new Ext.Button({  
        id:'btnExport',  
        text:'导出',  
        iconCls:'icon-export',  
        handler:function(){  
            if(sdField.isValid() && edField.isValid()){  
                var startDate=sdField.getValue().dateFormat('Y-m-d');  
                var endDate = edField.getValue().dateFormat('Y-m-d');  
                Ext.Ajax.request({  
                    url:'./sign_control.jsp?command=query',  
                    params:{ startDate:startDate, endDate:endDate },  
                    success:function(response){  
                        var json = eval('('+response.responseText.trim()+')');  
                        var records = json.records;  
                        var html = [  
                            '<table border=1><tr><th>姓名</th><th>日期</th><th>时间</th><th>星期</th></tr>' 
                        ];  
                        for(var i=0;i<records.length;i+=1){  
                            var rc = records[i];  
                            html.push('<tr><td>'+rc.cname+'</td><td>'+rc.signDate+'</td><td>'+rc.signTime+'</td><td>'+getWeek(rc.signDate)+'</td></tr>');  
                        }  
                        html.push('</table>');  
                        html = html.join(''); //最后生成的HTML表格  
                        tableToExcel(html);  
                        //document.getElementById('debuger').innerHTML=html;  
                    },  
                    failure:function(response){  
                        Ext.Msg.alert('信息',response.responseText.trim());  
                    }  
                });  
            }  
        }  
    });  
      
    //创建Grid  
    var signGrid = new Ext.grid.GridPanel({  
        store:signStore,  
        cm:columnModel,  
        sm:sm,  
        renderTo:'sign_grid',  
        width:600,  
        height:440,  
        title:'员工签到信息管理系统',  
        frame:true,  
        iconCls:'icon-grid',  
        loadMask:true,  
        stripeRows:true,  
        tbar:[  
            '日期从',sdField,' 到 ',edField,'  ',btnSearch,'-',  
            btnLogon,btnSign,btnChangePwd,btnLogout,btnExport  
        ]  
    });  
      
    btnLogout.disable(); //退出按钮  
    btnSign.disable(); //签到按钮  
    btnChangePwd.disable(); //修改密码按钮  
      
    signStore.load();  
      
    //登录-用户名字段  
    var enameField = new Ext.form.TextField({  
        fieldLabel:'用户名',  
        id:'ename',  
        name:'ename',  
        allowBlank:false,  
        anchor:'100%' 
    });  
      
    //登录-密码字段  
    var pwdField = new Ext.form.TextField({  
        fieldLabel:'密码',  
        id:'pwd',  
        name:'pwd',  
        allowBlank:false,  
        inputType:'password',  
        anchor:'100%' 
    });  
      
    //登录表单  
    var logonForm = new Ext.form.FormPanel({  
        labelAlign:'right',  
        labelWidth:50,  
        frame:true,  
        //title:'用户登录',  
        url:'./sign_control.jsp?command=logon',  
        items:[ enameField ,pwdField ],  
        buttons:[{  
            text:'登录',  
            handler:function(){  
                var f = logonForm.getForm();  
                if(f.isValid()){  
                    f.submit({  
                        waitMsg:'登录中,请稍候...',  
                        success:function(form, action){  
                            if(action.result.logonOK===false){  
                                Ext.Msg.alert('信息',action.result.msg);  
                                return;  
                            }  
                            f.reset();  
                            logonWin.hide();  
                            btnLogon.disable();  
                            btnLogout.enable();  
                            btnChangePwd.enable();  
                            if(action.result.signed===false){//如果已签到,则禁用签到按钮  
                                btnSign.enable();  
                            }  
                        },  
                        failure:function(){  
                            Ext.Msg.alert('错误','无法链接服务器.');  
                        }  
                    });  
                }  
            }  
        },{  
            text:'取消',  
            handler:function(){  
                logonForm.getForm().reset();  
                logonWin.hide();  
            }  
        }]  
    });  
      
    //登录窗口  
    var logonWin = new Ext.Window({  
        title:'用户登录',  
        autoHeight:true,  
        width:300,  
        closeAction:'hide',  
        items:[logonForm]  
    });  
      
    //修改密码表单  
    var changePwdForm = new Ext.FormPanel({  
        labelAlign:'right',  
        labelWidth:70,  
        frame:true,  
        url:'./sign_control.jsp?command=changePwd',  
        items:[  
            new Ext.form.TextField({  
                id:'oldPassword',  
                name:'oldPassword',  
                fieldLabel:'原密码',  
                inputType:'password',  
                allowBlank:false,  
                anchor:'100%' 
            }),  
            new Ext.form.TextField({  
                id:'newPassword',  
                name:'newPassword',  
                fieldLabel:'新密码',  
                inputType:'password',  
                allowBlank:false,  
                anchor:'100%' 
            }),  
            new Ext.form.TextField({  
                id:'newPassword2',  
                name:'newPassword2',  
                fieldLabel:'重复密码',  
                inputType:'password',  
                allowBlank:false,  
                anchor:'100%' 
            })  
        ],  
        buttons:[{  
            text:'提交',  
            handler:function(){  
                var f = changePwdForm.getForm();  
                if(!f.isValid()) return;  
                if(Ext.get('newPassword').getValue() != Ext.get('newPassword2').getValue()){  
                    Ext.Msg.alert('信息','两次输入的密码不一致');  
                    return;  
                }  
                f.submit({  
                    waitMsg:'执行中,请稍候...',  
                    success:function(form, action){  
                        Ext.Msg.alert('信息',action.result.msg);  
                        if(action.result.changeOK===false){ //如果失败的话  
                            return;  
                        }  
                        f.reset();  
                        changePwdWin.hide();  
                    },  
                    failure:function(){  
                        Ext.Msg.alert('错误','无法链接服务器.');  
                    }  
                });  
            }  
        },{  
            text:'取消',  
            handler:function(){  
                changePwdForm.getForm().reset();  
                changePwdWin.hide();  
            }  
        }]  
    });  
      
    //修改密码窗口  
    var changePwdWin = new Ext.Window({  
        title:'修改密码',  
        autoHeight:true,  
        width:300,  
        closeAction:'hide',  
        items:[changePwdForm]  
    });  
});