EXTJS4.x表单系统之 Ext.form.FormPanel登录框demo

Ext.form.FormPanel的帮助文档：

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Panel

查阅手册得知：

FormPanel 为表单提供一个标准容器，它的本质是一个标准的 Ext.panel.Panel，它会自动创建一个BasicForm并管理任何添加到其中Ext.form.field.Field的对象。此外还包括配置和使用字段。

 

这里主要用实现是表单验证的功能。

默认情况下，通过Ajax外部形式提交，使用Ext.form.action.Action

---

这里formpanel包含了Ext.form.Basic，而且Ext.form.Basic具有submit（提交表单）的方法

所以只要使用这个方法，就可以简单实现登录账户的提交。

这里查阅手册，明白submit方法，以及ajax提交后服务器返回正确与错误的json

成功：

{
    "success":true, // note this is Boolean, not string
    "msg":"Consignment updated"
}

失败：

{
    "success":false, // note this is Boolean, not string
    "msg":"You do not have permission to perform this operation"
}

Ext.form.action.Submit手册里介绍了submit的配置，http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.action.Submit

 

我们的开发工具仍然使用Sencha Architect，下面我们来构建一下界面

1.启动Sencha Architect，创建一个命名为form的工程，我是的放到java web工程的WebRoot目录下方便使用。

2.找到formPanel控件并拖到到设计窗口中，如下图

2.给新formPanel改个名称，默认为MyForm我们改为LoginForm，选中MyForm修改userClassName属性如下图

3.修改一下LogingForm的标题，我们只需要修改LoginForm的title属性即可，改为“请登录”，同样设置id为LoginForm，如下图

4.跟步骤3一样分别把LoginForm的width和height修改为420和180.保存一下刷新一下javaweb工程，启动tomcat并打开浏览器可以看到下图效果

 

5.接下来我们再进一步构建这个界面，首先让LoginForm居中，这个需要修改LoginForm的属性。快速定位style，点击编辑按钮，如下图

接下来进入了样式编辑窗口，输入以下内容，这个不解析

{
    marginRight: 'auto',
    marginLeft: 'auto',
    marginTop: '200px',
    marginBottom: 'auto'
}

如下图，输入完成保存回到designer窗口

我们是设计窗口看到LoginForm窗口已经居中了

设置LoginForm的布局方式为绝对布局，即设置layout属性为absolute

接下来我们找到forms里面的button和text field控件拖到到Login里面，并移动到合适的位置

把文字改成如下

接下来设置一下这些控件的大小需要设置的属性如下

两个text filed：

name   ：分别为userName，password

width ：分别为350,350

lableWidth：60,60

密码框的inputType属性还要设置成password

 

两个button：

id：分别设置为btnLogin，btnRet

width：分别设置为60,60

保存等到下图效果：

6.添加button的handler，我们先来添加充值按钮的响应，在右上角的工程视图中选择btnReset，找到handler属性点击最后的那个加号图标添加一个handler，再点击产生新的handler中的箭头可以去到代码编辑界面。

输入以下代码

Ext.getCmp('LoginForm').form.reset();

代码的意思是拿到id为LoginForm的控件，调用form的reset方法重置表单

同理增加登录button的业务处理代码

//获取form控件并调用submit方法提交
Ext.getCmp('LoginForm').getForm().submit({
    //设置提交的地址
    url:'login.json',
    //设置提交的方式为post
    method: 'post',
    //设置等待时显示的内容
    waitMsg: "正在登录......",
    //网络成功返回
    success: function(form, action) {
        //获取返回json中的success字段
        var loginResult = action.result.success;
        if (loginResult === false) {
            Ext.Msg.alert('提示', action.result.msg);
        }
        else {
            if (loginResult === true) {
                Ext.Msg.alert('提示', '登录成功！');
            }
        }
   },
    //网络失败返回
   failure: function(form, action) {
       switch (action.failureType) {
           case Ext.form.Action.CLIENT_INVALID:
               Ext.Msg.alert("错误1", "提交的表单数据无效,请检查!");
           break;
           case Ext.form.Action.CONNECT_FAILURE:
               Ext.Msg.alert("错误2", "请求失败");
           break;
           case Ext.form.Action.SERVER_INVALID:
               Ext.Msg.alert("账号或密码错误！", action.result.msg);
       }
   }
});

后台我们就不写代码了，直接放一个login.json文件到同级目录下，代码如下

{
    "success":true, 
    "msg":"Consignment updated"
}

 

接下来保存，刷新javaweb工程目录启动tomcat，打开浏览器，我们可以看到下图效果

 

好了，大功告成，关于表单验证跟后台数据库操作这里就不做了，不难就一下业务逻辑。写了很长了...