Fügen Sie google reCAPTCHA zu ExtJS Komponente hinzu

Question

Ich versuche google recaptcha in extjs Anwendung zu setzen, aber es wird nicht gerendert.

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

Answer 1

Nun, ist mit Google recaptha mit ExtJS etwas wie folgt aus:

1. laden recaptha Code, fügen Sie

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

an entsprechender Stelle im Code.

1. recaptcha auf jede Komponente hinzufügen, wie folgt aus:

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

Sie haben in ihm zu tun, zum Beispiel, afterrender Zuhörer da, wenn Sie gerade definieren Ihre ExtJS-Komponenten-bezogenen DOM-Elemente wurden noch nicht zu den Dokumentelementen hinzugefügt.

Und wenn jemand danach sucht - Google reCAPTCHA guide.