Ext3.0从入门到精通 第三章 使用Ext做第一个界面 登陆界面(三)

 

1、  adminlogin.js

adminlogin.js是Ext界面生成的关键代码。

整个代码是包含在Ext.onReady();方法内部的。

在网页加载完后，浏览器会自动调用Ext.onReady()中包含的函数代码。

也就是说页面加载完后，会触发加载完事件，调用其中的function（）部分代码。

adminlogin.js代码如下：

Ext.onReady(function(){

//指定表单提示信息的提示方式。

// 分别有under, side, qtip 等值。

// under是在表单域下面提示    side是在表单域的右边显示提示信息（鼠标放在提示图标上有文字提示）  qtip是在表单中弹出提示。我们这里选用 side方式。

Ext.form.Field.prototype.msgTarget = 'side';

// 初始化话Ext的提示信息，去掉会影响提示信息

    Ext.QuickTips.init();

    // 调用tools.js中的方法，创建三个form组件（也可以自己编写）,分别是密码，用户名和验证码

    var _password = createComponent('textfield','密   码','password','password',undefined,false,undefined,'password',undefined);

    var_login=createComponent('textfield','用户名','loginId','loginId',undefined,false,
undefined,'textfield',undefined);

    var_randCode=createComponent('textfield','验证码','randCode','randCode',undefined,
false,undefined,'textfield',undefined);

  

    // 给验证码组件定义一个宽度80

_randCode.width=80;

// 创建一个FormPanel组件实例

    var loginForm = new Ext.FormPanel({

                    id:'loginForm',// formPanel组件的ID

                    width:458,// 组件宽度

                    height:358,// 组件高度

                    align:'left',// 组件居左布局，还有right和center两个值可以选择

                    el: 'loginHeader',//指定组件渲染的容器

                    name: 'loginForm', //组件名称

                    autoTabs:true,//按自动方式指定表单中表单域的tab顺序

                    activeTab:0,//指定第一聚焦位置

                    border:false,//定义表单是否有border

                    labelAlign:"right",//让label居右

                    labelWidth:180,//定义label的宽度

                    // 指定提交事件触发的时候，需要做的事情

                    submit:function(){

                                  this.getEl().dom.action='../adlogin.do'; //该表单的提交action url

                                  this.getEl().dom.submit(); // 提交表单

                                 },

                    // 指定表单重置事件的事情

                                reset:function(){

                                    this.getEl().dom.reset();//重置表单的所有表单域

                                },

                    // 用items指定表单中的表达域,该登陆表单有三个表单域，分别是用户名、密码和验证码

                    items:[

                        _login,

                        _password,

                        _randCode

                    ] ,

                    // buttons属性，指定表单的按钮。

                    buttons:[

                        // 添加一个提交按钮组件

                        {

                            type:'submit',  // 按钮类型，submit

                            text:'登陆',//按钮上面的文字

                            // 定义点击按钮后，调用loginForm（前面有定义）面板中form的submit方法

                            handler:function(){

                                loginForm.form.submit();

                            }

                        },

                        // 同上面的提交按钮类似，添加一个重置按钮

                        {

                            type:'reset',

                            text:'取消',

                            handler:function(){

                                loginForm.form.reset();

                            }

                        }

                    ]              

                   

    }); 

   // 通过如上代码，我们就创建了一个formPanel组件实例，并且在里面添加了登录名、密码、验证码三个输入框和两个表单按钮：提交和重置。并且指定了该实例的渲染容器：loginHeader div。

   // 接下来要做的事情是，创建一个Ext窗体，将formPanel实例放入该窗体中，并且显示窗口

 

   // 创建一个窗口组件实例

   var win = new Ext.Window({

                el:'hello-win',//指定窗口渲染的容器

                layout:'fit',//指定fit布局模式，用一个控件填充整个容器，在这里是formPanel

                width:460,

                height:240,

                closeAction:'hide',//隐藏窗口的close按钮

                plain: true,// ture表示主体背景透明，false表示主体有背景色，默认false

                modal:true,//模式窗口，默认为false，非模式窗口

                collapsible: true,//能自动收缩

                maximizable:false,//不最大化显示

                draggable: true,//可以拖动

                closable: false,//不能关闭

                resizable:false,//不能改变大小

                animateTarget:document.body,//指定在哪个目标控件中逐渐显示

                items:  loginForm//窗口中包含的组件

              }

           );

        // 到这里，我们已经完成了一个窗口实例的创建，指定了它的渲染容器是hello-win div，它里面包含了loginForm 表单面板。接下来就是调用窗体的show方法，按设置的属性显示窗口。

        win.show();

        // 上面显示的窗口里面，如果比较细心的话，将发现验证码输入框后面根本就没有验证图片。不要急，这个部分我们还没处理呢，接下来就是做验证图片的显示。

        // 要完成验证图片的显示，必须先编写一个产生验证图片的代码，这个就不详细讲解了，我们这是使用image.jsp产生图片后返回。

        // 使用Ext.getDom()方法，获取验证组件对象，randCode是验证组件的id名称，在创建验证组件的时候有指定。

        var bd = Ext.getDom('randCode');

        // 获取验证组件的父容器对象    

        var bd2 = Ext.get(bd.parentNode);

        // 在验证码父容器对象中，创建一个子元素,html代码如<span><img src=’../image.jsp’ /></span>   

        bd2.createChild([
{tag:'span',html:''},
{tag:'img',src: '../image.jsp',align:'absbottom'}]);

});

 

到现在为止，我们就用javascript代码，产生并且组装了一个包含有三个输入框的表单的窗口，并且能显示出来了。

调试一下，恭喜您完成了第一个Ext窗口创建的学习。