ExtJS 4验证码表格

本文介绍了ExtJS 4验证码表格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经设置了一个密钥，并且可以使该Recaptcha自动显示在页面上，但是我不知道如何将其转换为表单.

I have set up a key and can get the recaptcha to show on the page it self but I don't know how to get it into a form.

实际上我不想使用id，因为稍后我也会在应用程序内部重用它，因此最好使用itemId.我假设尚未创建该元素.

Actually I don't want to use an id since I'll be reusing this later inside the app too so to use itemId would be preferred.I'm assuming that the element hasn't been created yet.

我的包括:HTML代码:

My include:HTML Code:

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

错误(从recaptcha_ajax.js生成.无法获取ID为'recaptcha'的控件):未被捕获的TypeError:无法将属性'innerHTML'设置为null

Error (generated from recaptcha_ajax.js. Can't get the control with id 'recaptcha'):Uncaught TypeError: Cannot set property 'innerHTML' of null

代码如下:

Ext.define('Login.view.Login', {
extend: 'Ext.form.Panel',
alias: 'widget.Login.view.Login',


border: false,
bodyPadding: 5,


initComponent: function() {


    var config = {
        layout: 'anchor',
        defaultType: 'textfield',
        defaults: {
            anchor: '100%',
            allowBlank: false
        },
        items: [{
            fieldLabel: 'Company Id',
            name: 'companyId'
        },{
            fieldLabel: 'Username',
            name: 'username'
        },{
            fieldLabel: 'Password',
            name: 'password',
            inputType: 'password'
        },{
            /*xtype: 'panel',
            itemId: 'reCaptcha',
            border: false,*/
            html: '<div id="recaptcha">adsf</div>'
        }],
        buttons: [{
            text: 'Login'
        }]
    };
    Ext.apply(this, config);


    this.callParent();
},
afterRender: function() {
    Recaptcha.create("heres_my_public_key",
        document.getElementById('recaptcha'),
        {
            theme: "clean"/*,
            callback: Recaptcha.focus_response_field*/
        }
    );
    this.callParent();
}
});

有人使用ExtJS 4做到了吗?

Anyone done this using ExtJS 4?

推荐答案

验证码创建得太早了.解决方案:

captcha created too early. Solution:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="ext-4.0.6/resources/css/ext-all.css" type="text/css">
    <link rel="shortcut icon" type="image/png" href="../Icon.png">
    <script type="text/javascript" src="ext-4.0.6/ext-all-debug.js"></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">

Ext.define('Login.view.Login', {
    extend: 'Ext.form.Panel',
    alias: 'widget.Login.view.Login',

    border: false,
    bodyPadding: 5,

    initComponent: function() {

        var config = {
            layout: 'anchor',
            defaultType: 'textfield',
            defaults: {
                anchor: '100%',
                allowBlank: false
            },
            items: [{
                fieldLabel: 'Company Id',
                name: 'companyId'
            },{
                fieldLabel: 'Username',
                name: 'username'
            },{
                fieldLabel: 'Password',
                name: 'password',
                inputType: 'password'
            },{
                xtype: 'panel',
                itemId: 'reCaptcha',
                border: false,
                html: '<div id="recaptcha">adsf</div>',
                listeners:{
                     {
                        console.log(Ext.getDom(this.body));
                        Recaptcha.create("heres_my_public_key",
                            Ext.getDom(this.body),
                            {
                                theme: "clean",
                                callback: Recaptcha.focus_response_field
                            }
                        );
                    }
                }
            }],
            buttons: [{
                text: 'Login'
            }]
        };


        Ext.apply(this, config);

        this.callParent();
    }/*,
    afterRender: function() {
        var captchaEl = Ext.get('recaptcha');
        console.log(captchaEl);
        Recaptcha.create("heres_my_public_key",
            document.getElementById('recaptcha'),
            {
                theme: "clean",
                callback: Recaptcha.focus_response_field
            }
        );
        this.callParent();
    }*/
});

// entry point
Ext.onReady(function() {
    var l = Ext.create('Login.view.Login', {renderTo:Ext.getBody()});
}); // eo onReady

</script>
</head>
<body>
</body>
</html>

这篇关于ExtJS 4验证码表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

ReCaptcha