Форма рекапчи ExtJS 4

Я настроил ключ и могу заставить recaptcha отображаться на самой странице, но я не знаю, как поместить его в форму.

На самом деле я не хочу использовать идентификатор, так как я буду использовать его позже в приложении, поэтому предпочтительнее использовать itemId. Я предполагаю, что элемент еще не создан.

Мое включает: HTML-код:

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

Ошибка (генерируется из recaptcha_ajax.js. Не удается получить элемент управления с идентификатором «recaptcha»): Uncaught TypeError: невозможно установить для свойства «innerHTML» значение null

Вот код:

Ext.define('Login.view.Login', {
extend: 'Ext.form.Panel',
alias: 'widget.Login.view.Login',


border: false,
bodyPadding: 5,


initComponent: function() {


    var config = {
        layout: 'anchor',
        defaultType: 'textfield',
        defaults: {
            anchor: '100%',
            allowBlank: false
        },
        items: [{
            fieldLabel: 'Company Id',
            name: 'companyId'
        },{
            fieldLabel: 'Username',
            name: 'username'
        },{
            fieldLabel: 'Password',
            name: 'password',
            inputType: 'password'
        },{
            /*xtype: 'panel',
            itemId: 'reCaptcha',
            border: false,*/
            html: '<div id="recaptcha">adsf</div>'
        }],
        buttons: [{
            text: 'Login'
        }]
    };
    Ext.apply(this, config);


    this.callParent();
},
afterRender: function() {
    Recaptcha.create("heres_my_public_key",
        document.getElementById('recaptcha'),
        {
            theme: "clean"/*,
            callback: Recaptcha.focus_response_field*/
        }
    );
    this.callParent();
}
});

Кто-нибудь делал это с помощью ExtJS 4?

/K


recaptcha extjs4
person Asken    schedule 15.10.2011    source источник
comment
Пожалуйста, не используйте только внешние ссылки в своих сообщениях. Если они сломают весь пост, он бесполезен...   -  person sra    schedule 19.10.2011
comment
отмеченный. на самом деле довольно забавно. сенча упал сегодня... и до сих пор не работает.   -  person Asken    schedule 20.10.2011

Ответы (2)


arrow_upward
3
arrow_downward

капча создана слишком рано. Решение:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="ext-4.0.6/resources/css/ext-all.css" type="text/css">
    <link rel="shortcut icon" type="image/png" href="../Icon.png">
    <script type="text/javascript" src="ext-4.0.6/ext-all-debug.js"></script>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">

Ext.define('Login.view.Login', {
    extend: 'Ext.form.Panel',
    alias: 'widget.Login.view.Login',

    border: false,
    bodyPadding: 5,

    initComponent: function() {

        var config = {
            layout: 'anchor',
            defaultType: 'textfield',
            defaults: {
                anchor: '100%',
                allowBlank: false
            },
            items: [{
                fieldLabel: 'Company Id',
                name: 'companyId'
            },{
                fieldLabel: 'Username',
                name: 'username'
            },{
                fieldLabel: 'Password',
                name: 'password',
                inputType: 'password'
            },{
                xtype: 'panel',
                itemId: 'reCaptcha',
                border: false,
                html: '<div id="recaptcha">adsf</div>',
                listeners:{
                     {
                        console.log(Ext.getDom(this.body));
                        Recaptcha.create("heres_my_public_key",
                            Ext.getDom(this.body),
                            {
                                theme: "clean",
                                callback: Recaptcha.focus_response_field
                            }
                        );
                    }
                }
            }],
            buttons: [{
                text: 'Login'
            }]
        };


        Ext.apply(this, config);

        this.callParent();
    }/*,
    afterRender: function() {
        var captchaEl = Ext.get('recaptcha');
        console.log(captchaEl);
        Recaptcha.create("heres_my_public_key",
            document.getElementById('recaptcha'),
            {
                theme: "clean",
                callback: Recaptcha.focus_response_field
            }
        );
        this.callParent();
    }*/
});

// entry point
Ext.onReady(function() {
    var l = Ext.create('Login.view.Login', {renderTo:Ext.getBody()});
}); // eo onReady

</script>
</head>
<body>
</body>
</html>
person Asken    schedule 19.10.2011

arrow_upward
1
arrow_downward

//после создания reCaptcha div вызываем следующие строки.

‹ div id="reCaptcha" > ‹ / div>

если ($("#reCaptcha").length>0)

        showRecaptcha("reCaptcha");

функция showRecaptcha (элемент) {

$.getScript('http://www.google.com/recaptcha/api/js/recaptcha_ajax.js',
    function () {
        Recaptcha.create("your public key", element, {
            theme: "red",
            callback: Recaptcha.focus_response_field
        });
    });

}

person Elanchezhian Narayanasamy    schedule 20.06.2013