Results 1 to 4 of 4

Thread: looking for reCaptch for extjs 4

  1. #1
    Ext JS Premium Member
    Join Date
    Apr 2010
    Posts
    51

    Default looking for reCaptch for extjs 4

    Has anyone created a plugin for reCaptcha that works with extjs 4?

  2. #2
    Sencha User emblemparade's Avatar
    Join Date
    Nov 2010
    Location
    Chicago, IL
    Posts
    26

    Default

    I've created one as part of the Savory framework (LGPL). However, he's a quick copy-and-paste of it:

    Code:
    Ext.define('Savory.form.field.ReCaptcha', {
        alias: 'widget.recaptchafield',
        extend: 'Ext.form.field.Base',
    
        fieldSubTpl: [
            '<div id="{id}" style="height: 129px;"',
            '<tpl if="tabIdx">tabIndex="{tabIdx}" </tpl>',
            'class="{fieldCls}"></div>',
            {
                compiled: true,
                disableFormats: true
            }
        ],
        
        constructor: function(config) {
            this.callParent([config]);
            this.theme = this.theme || 'blackglass';
            this.on('render', function() {
                this.up('form').getForm().on('actionfailed', function(form, action) {
                    if (action.type == 'submit') {
                        this.renderReCaptcha();
                    }
                }, this);
                this.renderReCaptcha();
            });
        },
        
        renderReCaptcha: function() {
            Recaptcha.create(this.code, this.inputEl.id, {
                theme: this.theme,
                callback: Recaptcha.focus_response_field
            });
        },
        
        getRawValue: function() {
            var me = this,
                v = (me.inputEl ? me.inputEl.down('input[name=recaptcha_response_field]').getValue() : Ext.value(me.rawValue, ''));
            me.rawValue = v;
            return v;
        }
    });
    
    Ext.define('Savory.form.field.ReCaptchaChallenge', {
        alias: 'widget.recaptchachallengefield',
        extend: 'Ext.form.field.Hidden',
    
        getRawValue: function() {
            var me = this,
                v = this.up('form').getForm().findField('recaptcha_response_field').inputEl.down('input[name=recaptcha_challenge_field]').getValue();
            me.rawValue = v;
            return v;
        }
    });
    You'll notice that there are two fields that you need to include in your form, one for the response and one for the challenge.

    Also note that the reCAPTCHA is re-rendered upon form submission failure: this is necessary, because a reCAPTCHA challenge can only be checked once.

    An example of a form that uses this (with some alignment tricks):

    Code:
    var fields = [
      {
        "name": "username",
        "fieldLabel": "Username",
        "allowBlank": false
      },
      {
        "name": "password",
        "fieldLabel": "Password",
        "inputType": "password",
        "allowBlank": false
      },
      {
        "name": "recaptcha_response_field",
        "fieldLabel": "Humanity test",
        "xtype": "recaptchafield",
        "code": "<insert your recaptcha public key here>",
        "allowBlank": false
      },
      {
        "name": "recaptcha_challenge_field",
        "fieldLabel": "recaptcha_challenge_field",
        "xtype": "recaptchachallengefield",
        "allowBlank": false
      }
    ];
    
    Ext.create('Ext.window.Window', {
        title: 'Login',
        items: {
            xtype: 'form',
            border: false,
            bodyCls: 'x-border-layout-ct', // Uses the neutral background color
            bodyPadding: 10,
            defaults: {
                width: 468, // The reCAPTCHA width is 318 (labelWidth + labelPad + 318 = width)
                labelWidth: 145,
                labelPad: 5
            },
            defaultType: 'textfield',
            items: fields,
            buttons: [{
                text: 'Submit',
                disabled: true,
                formBind: true,
                handler: function() {
                    var form = this.up('form').getForm();
                    if (form.isValid()) {
                        form.submit({
                            success: function(form, action) {
                               this.up('window').destroy();
                               Ext.Msg.alert('Success!', action.result.msg);
                            },
                            failure: function(form, action) {
                                Ext.Msg.alert('Failure!', action.result.msg);
                            },
                            this
                        });
                    }
                }
            }]
        }
    }).show();

  3. #3

  4. #4

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •