当前位置:编程学习 > JS >>

一步一步使用Ext JS MVC与Asp.Net MVC 3开发简单的CMS后台管理系统之登录窗口

完成配置后,要做的是完成登录页面。因为要实现登录之后写入认证信息到Cookie,因而必须做一次跳转。当然,不做跳转,或不写入认证信息也行,但问题比较复杂,在这里还是做简单处理比较合适。还有就是写入认证信息的目的是为了在控制器通过特性控制方法的权限。
      既然要跳转一次,就有两种思路了,一种是为了快速显示登录页,可不加载Ext JS,而是使用传统的页面,显示一个登录页,这样页面加载快,用户感受也好很多。第二种方式就是用Ext JS窗口做一个登录窗口,不过要加载Ext JS库,显示时间会久点,体验不是太好。不过加载过Ext JS,后面显示主框架页的时候就可以利用缓存数据。采用那种方式,根据自己喜好或项目要求定吧。本文是演示Ext JS的,因而会采用第二种方式,写一个登录窗口。
      登录窗口作为常用组件,在其它项目也会用到,因而很适合写成一个扩展。这里还要考虑一个问题,是写成单例模式的扩展,还是单纯是扩展?单例模式的好处是在 页面中直接用show方法显示就行了,而纯扩展的好处的是可以通过配置项自定义标题、图标这类的东西。笔者更喜欢单例模式,原因是直接在扩展中修改标题之 类的这些东西,比使用配置项来定义来得方便,毕竟是Javascript写的扩展,修改起来比使用C#这些语言的扩展容易得多了。
      目标明确后,就可以动手了,在解决方案资源管理器中选择Scripts\ExtJS\ux目录,单击右键选择添加,新建项,在弹出窗口中如图6那样选择 Jscript文件,并将名称修改为login.js(以后的项目的可直接将该文件复制到该目录),单击添加按钮创建文件。这里要注意,文件名不能用类的 全名做文件名,因为动态加载会根据类名自动找到目录并加载文件,类名中最后一个小数点后的名称就是文件名,例如,登录窗口的类全称为 Ext.ux.Login,而login就是文件名。

 
      如果想要在脚本中使用ExtJS的提示信息,可将书附带的资源包中的Ext.js文件复制到ExtJS目录中,复制后,在解决方案资源管理器将Ext.js拖到到login.js文件中,就会生成以下代码:
[javascript] 
/// <reference path="../Ext.js" /> 

      这样,就可以在脚本中使用Ext  JS的提示信息,在文件中输入“Ext.cr”,将看到如图7所示的效果。

 
      现在,先把类的定义写好,包括父类、单例模式、窗口标题、宽度和高度。窗口的标题为“简单的CMS后台管理系统后台登录窗口”。宽度和高度暂定为400,到时候再调整。最终代码如下:
[javascript]
Ext.define("Ext.ux.Login", { 
    extend: "Ext.window.Window", 
    singleton: true, 
    title: '简单的CMS后台管理系统后台登录窗口', 
    width: 400, 
    height: 400 
}); 

       接下来,要考虑窗口应该包含那些配置项了,窗口应是模态的,不能关闭,不能调整大小,关闭模式为隐藏,隐藏模式为偏移等,因而加入以下代码:
[javascript]
modal: true, 
closable: false, 
resizable: false, 
closeAction: 'hide', 
hideMode: 'offsets', 
 
      好了,现在要在窗口的initComponent方法内定义登录用的控件了。一般的登录窗口都包含用户名、密码和验证码3个文本输入框,还包含有显示验证 码的图片、登录和重置按钮。因而需要用到的ExtJS控件包括表单面板、图片、工具栏、按钮和文本字段。下面要做的是先定义好表单,在扩展内加入以下代 码:
[javascript] 
   initComponent: function () { 
       var me = this; 
       me.form = Ext.create(Ext.form.Panel, { 
            
       }); 
me.callParent(arguments); 
   } 
 
      代码中,me的作用是将外部作用域中的this对象保存为本地变量,这样的好处包括,一是,如果this是window等全局变量,就可以将全局变量变成 本地变量,提高访问效率,二是可以让闭包访问该对象。这写法在Ext JS文件中始终贯穿其中,本着拿来主义的精神,好东西应该学一下。
      注意create方法中的对象名称,笔者并没有使用字符串,这样就可以直接使用对象,而不需要再去转换表中找对象,可以提高速度,笔者建议这样写。
      调用callParent方法是必须的,不然组件运行会出问题,达不到预期效果,具体请参考笔者书中的讲解。
       接下来是定义表单的配置项了,笔者习惯的配置项有以下几个:
[javascript] 
border: false,  
bodyPadding: 5, 
bodyStyle: "background:#DFE9F6", 
 
      代码中,第一句表示不要边框,如果喜欢带有边框的表单,可以把这项去掉或者修改为true。第二句表示将表单面板向内压缩5像素,这样表单内的组件就不会 和窗口的内边框粘在一起,这个可根据个人喜好设置。第三句的作用就是让表单面板的背景颜色和窗口融合在一起,而不是默认的白色,这还是个人喜好问题。
      接着加入表单面板的提交地址,这里定为Account/Login,就是Account控制器的Login方法,代码如下:
[javascript]
url: "Account/Login", 

      因为表单内使用的都是文本字段,因而可以统一做一些定义,如标签宽度为80,标签的分隔符为中文冒号,锚固为0,都不允许为空等,代码如下:
[javascript] 
defaultType: "textfield", 
fieldDefaults: { 
    labelWidth: 80,  
labelSeparator: ":",  
anchor: "0",  
allowBlank: false 
}, 
 
      接下来是定义字段了,这个简单,因为默认设置已经定义了几个配置项,因而余下的就只有字段标签和名称。验证码特殊点,必须是6位字符,代码如下:
[javascript] 
items: [ 
    { 
        fieldLabel: "用户名", name: "UserName" 
    }, 
    { 
        fieldLabel: "密码", name: "Password", inputType: "password" 
    }, 
    { 
        fieldLabel: "验证码", name: "Vcode", minLength: 6, minLength: 6 
    } 

      现在要考虑怎么显示验证码图片,如果直接在表单内加入Image控件,会很难控制图片的位置,因为最好的方式是先套一个容器。因为Img对象的实例在刷新 图片的时候还要用到,因而最好用一个属性来指向对象实例,这样就可以通过该属性在类的内部访问到实例了。在创建表单的前面添加以下创建Img对象实例的代 码:
[javascript] 
me.image=Ext.create(Ext.Img,{ 
    src: "/VerifyCode" 
}); 
 
      千万不要在创建表单后面创建,不然在表单内插入图片的时候就找不到对象了。
      代码中,验证码图片将VerifyCode控制器生成,这个暂时放下,会在后面讨论。
      还要实现的是单击图片刷新验证码,但是查API发现Img对象居然没单击事件。没关系,在4.1版本的Ext JS中,修改了事件的定义方式,可以直接为对象生成的HTML元素绑定事件了,只要在监听事件中加入element配置项就行了,这相当方法。因而可在创 建Img实例的配置对象中加入以下代码:
[javascript]
listeners:{ 
    click:me.onRefrehImage, 
    element:"el", 
    scope:me 

       代码中,element配置项中的el就表示要在对象生成的HTML元素中绑定事件,绑定事件为click事件,事件将调用onRefrehImage方 法。方法只是简单的刷新图片,因而使用Img对象的setSrc方法就可以,使用以下代码顺便完成onRefrehImage方法:
[javascript] 
onRefrehImage: function () { 
  &nb

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,