ExtJs四(ExtJs MVC登录窗口的调试)

<div class="blogpost-body" id="cnblogs_post_body">
前言
继上一节中实现了验证码<a href="http://www.cnblogs.com/aehyok/archive/2013/04/19/3030212.html">http://www.cnblogs.com/aehyok/archive/2013/04/19/3030212.html</a>，现在我们可以进行对登录界面进行整合调试了。
正题
打开系统的首页页面文件，Views\Home目录下的Index.cshtml文件。要动态加载登录窗口，需要先设置好加载路径，因而在onReady函数前面加入以下代码：
<div class="cnblogs_code">
 <pre class="blockcode"> Ext.Loader.setConfig({
enabled: true,
paths: {
 'Ext.ux': 'scripts/extjs/ux'
}
});</pre>
</div>
代码中，enabled为true，表示开启动态加载，paths对象里面定义的就是加载路径，在这里定义了Ext扩展的加载路径为“scripts/extjs/ux”。
接着上面的代码下加入一个请求登录窗口的代码：
<div class="cnblogs_code">
 <pre class="blockcode">Ext.require('Ext.ux.Login');</pre>
</div>
这样，Ext就会自动去加载登录窗口了。
将原来调用alert方法的语句删除，然后加入显示登录窗口的代码：
<div class="cnblogs_code">
 <pre class="blockcode">Ext.ux.Login.show();</pre>
</div>
 现在，在页面打开首页，将看到如下图
<img alt="" height="247" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-a1fe8f1989b94393c9e15847828b4c8e.png" width="814">
单击一下图片，验证码也可刷新了。但问题是没鼠标指针不是手型的，这得改一下，要改不难，在创建Img对象的时候，加入style配置项就可以了，它会将该配置的值作为图片的样式，修改后的代码如下：
<div class="cnblogs_code">
 <pre class="blockcode">me.image = Ext.create(Ext.Img, {
style: "cursor:pointer ",
src: "/VerifyCode",
listeners: {
 click: me.onRefrehImage,
 element: "el",
 scope: me
}
});</pre>
</div>
现在先抛开数据库，来做个简单验证测试一下。首先要做的是在Models目录创建一个名为LoginModel.cs的类文件，创建后的代码如下：
<div class="cnblogs_code">
 <pre class="blockcode">namespace ExtMVCOne.Models
{
public class LoginModel
{
 [Required]
 [Display(Name = "用户名")]
 public string UserName { get; set; }

 [Required]
 [Display(Name = "密码")]
 public string Password { get; set; }

 [Required]
 [Display(Name = "验证码")]
 public string Vcode { get; set; }
}
}</pre>
</div>
当然还需要引用
<div class="cnblogs_code">
 <pre class="blockcode">using System.ComponentModel.DataAnnotations;</pre>
</div>
代码中Required特性表示字段是必须的。Display用来表示字段的中文名称，这不是必须。
模型创建后，