ExtJS4——表单的提交重置

最新推荐文章于 2022-05-14 11:25:47 发布

木然绽放

最新推荐文章于 2022-05-14 11:25:47 发布

阅读量1k

点赞数 1

分类专栏： ExtJS4

本文链接：https://blog.csdn.net/u013127751/article/details/65440576

版权

ExtJS4 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

给表单添加了提交和重置按钮，对表单提交的信息进行监听。对于窗口的图标和验证码的图标请自行添加。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>

    <link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
    <script type="text/javascript" src="ext-all-debug.js"></script>
    <script type="text/javascript" src="ext-all.js"></script>
    <script type="text/javascript" src="bootstrap.js"></script>
    <style type="text/css">
        .loginicon
        {
            background-image: url(image/login.gif) !important;
        }
    </style>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.form.Field.prototype.msgTarget='side';
    var btnsubmitclick=function(){
        if (form.getForm().isValid()) {
            //与服务器交互，进行秘密验证
            Ext.Msg.alert('提示','登录成功');
        }else{
             Ext.Msg.alert('提示','用户名和密码不能为空！');
        }
    }
    var btnresetclick = function(){
        form.getForm().reset();
    }
    var btnsubmit = new Ext.Button({
        text:'提交',
        handler:btnsubmitclick//当点击按钮是触发的函数（可以用于代替click事件）.
    });
    var btnreset = new Ext.Button({
        text:'重置',
        handler:btnresetclick
    })
    var txtusername = new Ext.form.TextField({
        width:240,
        allowBlank:false,
        maxLength:20,
        name:'username',
        fieldLabel:'用户名',
        blankText:'请输入用户名',
        maxLengthText:'用户名不超过20个字节'
    });
    var txtpassword = new Ext.form.TextField({
        width:240,
        allowBlank:false,
        maxLength:20,
        name:'password',
        inputType:'password',
        fieldLabel:'密码',
        blankText:'请输入密码',
        maxLengthText:'密码不超过20个字节'
    });
    var txtcheckcode = new Ext.form.TextField({
        
        fieldLabel:'验证码',
        id:'checkcode',
        allowBlank:false,
        width:176,
        blankText:'请输入验证码',
        maxLength:4,
        maxLengthText:'验证码不超过4个字节'
    });
    var form = new Ext.form.FormPanel({
        url:'处理表单的文件路径',
        labelAlign:'right',
        labelWidth:45,
        frame:true,
        cls:'loginform',
        buttonAlign:'center',
        bodyStyle:'padding:6px 0px 0px 15px',
        items:[txtusername,txtpassword,txtcheckcode],
        buttons:[btnsubmit,btnreset]

    });
    var win=new Ext.Window({ //创建对象老爱忘记写new
        title:'用户登录窗口',
        iconCls:'loginicon',//CSS类选择器，指定了背景图片，所有使用当前action的组件都用它作为 头部图标
        plain:true,
        width:276,
        height:174,
        resizable:true,
        shadow:true,
        modal:true,
        closable:true,
        animCollapse:true,
        items:form
    });
    win.show();
    //创建验证码
    var checkcode = Ext.getDom('checkcode');
    var checkimage = Ext.get(checkcode.parentNode);
    checkimage.createChild({
        tag:'img',
        src:'image/checkcode.gif',
        align:'absbottom',
        style:'padding-left:23px;cursor:pointer;'
    });
});
</script>
</body>
</html>

效果图：

木然绽放

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ExtJS4——表单的提交重置

给表单添加了提交和重置按钮，对表单提交的信息进行监听。对于窗口的图标和验证码的图标请自行添加。 .loginicon { background-image: url(image/login.gif) !important; } Ext.onRead
复制链接

扫一扫

专栏目录