学习EXTJS2

正在学习EXTJS2，在网上看到了filespots.com，试着写了一下模拟登录界面：

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//ZH-CN" "http://www.w3.org/TR/html4/strict.dtd" >
< html >
< head >
     < meta  http-equiv ="Content-Type"  content ="text/html; charset=UTF-8" >
     < title > Extjs 2.0 学习笔记 </ title >
<!-- Librarys -->
     < link  rel ="stylesheet"  href ="../js/ext2/resources/css/ext-all.css"  type ="text/css"   />
     < script  type ="text/javascript"  src ="../js/ext2/adapter/ext/ext-base.js" ></ script >
     < script  type ="text/javascript"  src ="../js/ext2/ext-all.js" ></ script >
     < script  type ="text/javascript"  src ="../js/ext2/source/locale/ext-lang-zh_CN.js" ></ script >

<!-- End Librarys -->
     < style  type ="text/css" > ...
    html, body {...}{
            font:normal 14px verdana;
            margin:0;
            padding:0;
            border:none;
            overflow:hidden;
            height:100%;
        }
        body{...}{background:url("images/bg-body.jpg") repeat-y 0 0;}
/**//*
 * Ext CSS Patch
 */
.x-window .x-window-header    {...}{
    padding-left:24px;
    background:url(images/filespot.gif) no-repeat 0 50%;
}
.x-window-body{...}{
    border:0 !important;
}
.x-panel-body {...}{
    border:0;    
}
.x-btn{...}{
    font:normal 11px tahoma,verdana,helvetica;
}
.x-btn button{...}{
    font:normal 12px 宋体;
}
/**//*
 * 自定义样式表
 */
.z-login-splash .x-panel-bwrap .x-panel-body {...}{
    background: url(images/bg-login-splash-filespots.jpg) no-repeat 0 0;
    border:none;
}
.z-authentification .x-panel-body {...}{
    background:#00396f url(images/bg-login-form.jpg) repeat-y 0 0;    
    color:#FFF;
    border:none;
    border-top:1px dotted #fff;
}
     </ style >
     < script  type ="text/javascript" > ...
    Ext.QuickTips.init();
    Ext.onReady(function() ...{
        var form = new Ext.form.FormPanel(...{
            bodyStyle:"padding:10px; padding-left: 120px;",
            labelWidth: 100,
            region: 'south',
            cls: 'z-authentification',
            autoCreate: true,
            height: 78,
            items: [
                new Ext.form.TextField(...{
                    fieldLabel:'登录用户',msgTarget : 'qtip',
                    name:"username",
                    id:"fieldUsername",
                    width:195,
                    vtype:"email",
                    allowBlank:false,
                    selectOnFocus:true
                }),
                new Ext.form.TextField(...{
                    fieldLabel:'用户口令',
                    inputType: "password",
                    id: "fieldPassword",
                    name: "password",
                    width: 195,
                    selectOnFocus: true
                })
            ]
        });
    
        var window = new Ext.Window(...{
            baseCls: 'x-window',
            title: '欢迎您使用 [FILESPOTS]',
            width: 596,height: 368,layout: 'border',plain:true, closable:false, modal:false, footer:true, resizable:false, constrain:true, focus:Ext.emptyFn,
            items: [
                new Ext.Panel(...{cls:"z-login-splash",region:"center"}),form
            ],
            buttons: [...{
                text: '登录',id: 'login',
                handler: function()...{
                    Ext.MessageBox.wait("正在登录，请稍候...");
                    setTimeout(function()...{
                        Ext.MessageBox.hide();
                        Ext.MessageBox.show(...{
                            title: '登录失败',msg: '输入的用户名或口令错误，请重试。',buttons: Ext.MessageBox.OK
                        });
                    }, 8000);
                }
            }]
        });
    
        window.show();
        Ext.get("fieldUsername").focus();
    });
     </ script >
</ head >
< body >
</ body >
</ html >

程序能运行。