CODEWITHSUNDEEP
extjsextjs4.2recaptcha
A. Sinha
A. Sinha

Reputation: 2716

Add google reCAPTCHA to ExtJS component

I am trying to put google recaptcha within extjs application but it is not getting rendered.

{
    xtype:'panel',
    width:300,
    height:60,
    html:'<div class="g-recaptcha" id="recaptcha" data-sitekey="MyKey" data-callback="correctCaptcha"></div>'
}

Upvotes: 2

Views: 1747

Answers (1)

Sergey Novikov
Sergey Novikov

Reputation: 4196

Well, using google recaptha with ExtJS is something like this:

  1. Load recaptha code, add

    <script src="https://www.google.com/recaptcha/api.js?render=explicit" async defer>
</script>

in appropriate place in your code.

  1. Add recaptcha to any component, like this:

    {
    xtype: 'box',
    id: 'myCaptcha',
    listeners: {
        'afterrender': function () {
            grecaptcha.render('myCaptcha', {
                'sitekey': 'your_site_key'
            });
        }
    }
}

You have to do it within , for example, afterrender listener because when you just define your ExtJS component related DOM elements not added to document elements yet.

And if someone looking for it - Google reCAPTCHA guide.

Upvotes: 4

Related Questions