将google reCAPTCHA添加到ExtJS组件

我试图将GoogleRecaptcha放在extjs应用程序中，但它并没有得到渲染

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

{
xtype:“面板”，
宽度：300，
身高：60，
html:'
}

好吧，将google recaptha与ExtJS结合使用是这样的：

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

加载代码，添加

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

例如，您必须在

afterrender

listener中执行此操作，因为当您仅定义与ExtJS组件相关的DOM元素时，尚未将其添加到文档元素中

---

如果有人在寻找它-。

我发现上面的代码有以下错误，“ReferenceError:grecaptcha未定义”，那么您将第1部分中的脚本添加错了。确保它是在ExtJS代码之前执行的。您好，我被分配了放置验证码的任务，但我对ExtJS一无所知，它设法与您的评论保持一致，但我不太确定如何使用密钥。您好，我被分配了放置验证码的任务，但我对ExtJS一无所知，它成功地推进了您的评论，但我不太确定如何处理密钥。