ExtJS 4 форма повторения - PullRequest
Новая
       8

ExtJS 4 форма повторения

2 голосов
/ 15 октября 2011

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

На самом деле я не хочу использовать идентификатор, так как я буду использовать его позже и внутри приложения, поэтому предпочтительнее использовать 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

Ответы [ 2 ]

3 голосов
/ 19 октября 2011

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

<!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>
1 голос
/ 20 июня 2013

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

if ($ ("# 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
        });
    });

}

...