添加谷歌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。