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方法,以及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,打开浏览器,我们可以看到下图效果

 

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

评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值