Home/ Questions/Q 6698897
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T06:37:55+00:00

I have set up a key and can get the recaptcha to show on

  • 0

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.

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.

My include:
HTML Code:

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

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

Here’s the code:

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();
}
});

Anyone done this using ExtJS 4?

/K

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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>
    • 0