แบบฟอร์ม Recaptcha ExtJS 4

ฉันได้ตั้งค่าคีย์แล้วและสามารถทำให้ recaptcha แสดงบนหน้าเว็บได้ด้วยตัวเอง แต่ฉันไม่รู้ว่าจะทำให้มันอยู่ในแบบฟอร์มได้อย่างไร

จริงๆ แล้ว ฉันไม่ต้องการใช้รหัส เนื่องจากฉันจะใช้รหัสนี้ซ้ำในภายหลังภายในแอปด้วย ดังนั้นควรใช้ itemId มากกว่า ฉันคิดว่ายังไม่ได้สร้างองค์ประกอบดังกล่าว

รวมของฉัน: รหัส HTML:

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

ข้อผิดพลาด (สร้างจาก recaptcha_ajax.js ไม่สามารถรับการควบคุมด้วย id '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

captcha สร้างเร็วเกินไป สารละลาย:

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