添加谷歌reCAPTCHA到ExtJS组件

Question

我想把谷歌recaptcha内extjs应用程序，但它没有得到渲染。

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

Answer 1

好，使用谷歌recaptha与ExtJS的是这样的：

1. 负载recaptha代码，在代码中添加

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

在适当的地方。

添加reCAPTCHA的任何组件，如：

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

你必须内做到这一点，例如，afterrender监听器，因为当你只是定义您的ExtJS组件相关的DOM元素尚未添加到文档元素中。

如果有人在找它 - Google reCAPTCHA guide。