Formulir recaptcha ExtJS 4

Saya telah menyiapkan kunci dan dapat menampilkan recaptcha di halaman itu sendiri tetapi saya tidak tahu cara memasukkannya ke dalam formulir.

Sebenarnya saya tidak ingin menggunakan id karena saya akan menggunakannya kembali nanti di dalam aplikasi juga jadi menggunakan itemId akan lebih disukai. Saya berasumsi bahwa elemen tersebut belum dibuat.

Saya menyertakan: Kode HTML:

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

Kesalahan (dihasilkan dari recaptcha_ajax.js. Tidak dapat memperoleh kontrol dengan id 'recaptcha'): TypeError Tidak Tertangkap: Tidak dapat menyetel properti 'innerHTML' dari nol

Berikut kodenya:

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();
}
});

Adakah yang melakukan ini menggunakan ExtJS 4?

/K


recaptcha extjs4
person Asken    schedule 15.10.2011    source sumber
comment
tolong jangan hanya menggunakan tautan eksternal di postingan Anda. Jika mereka merusak seluruh postingan tidak ada gunanya...   -  person sra    schedule 19.10.2011
comment
dicatat. sebenarnya cukup lucu. sencha turun hari ini... dan masih turun.   -  person Asken    schedule 20.10.2011

Jawaban (2)


arrow_upward
3
arrow_downward

captcha dibuat terlalu dini. Larutan:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="/idext-4.0.6/resources/css/ext-all.css" type="text/css">
    <link rel="shortcut icon" type="image/png" href="/id../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

//setelah membuat div reCaptcha, panggil baris berikut.

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

jika ($("#reCaptcha").panjang>0)

        showRecaptcha("reCaptcha");

fungsi showRecaptcha(elemen) {

$.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