ExtJS Click event on disabled TextField

Question

I'm using ExtJS 3.4.0

I have a form with 2 Radio and TextFields, a "Confirm" Button and a "Cancel" Button. Like this :

I have some validation constraints on my TextFields, thus my "Confirm" Button is disabled till my TextFields are valid.

My initial problem is that I want my "Confirm" Button enabled even if one of my "not checked" TextField is invalid.

I found a workaround : disable the TextField if the corresponding Radio is not checked.

But I want too that when I click on my TextField the corresponding Radio to be checked (like if I click on the Radio itself or its label), but my click listener is not working as my TextField is disabled.

Is there a solution to my problem please ? Or maybe to my initial problem ?

Thank you!

Here is a part of my code :

this.paypalAccount = new Ext.form.TextField({
    name : 'paypalAccount',
    emptyText : 'Enter your Paypal account here',
    maxLength : 128,
    allowBlank : false,
    disabled : true,
    handleMouseEvents: true,
    listeners: {
        render: function() {
            this.getEl().on('click', function() {
                Ext.getCmp('paypalRadio').setValue(true);
            });
        }
    }
});

this.paypalRadio = new Ext.form.Radio({
    id : 'paypalRadio',
    boxLabel : 'Paypal',
    checked : false,
    inputValue : 'paypalAccount'
});

this.paypalRadio.on('check', function() {
    if(this.paypalRadio.checked) this.paypalAccount.enable();
    else this.paypalAccount.disable();
}, this);

Answer 1

You can use a wrapper component and attache the click event to it. Something like:

{
    xtype: 'container',
    items: [{
        // YOUR TEXT FIELD
        xtype: 'textfield',
        id: 'paypalTextField',
        name: 'paypalAccount',
        emptyText: 'Enter your Paypal account here',
        maxLength: 128,
        allowBlank: false,
        disabled: true
    }],
    // Listeners of the wrapper Ext.Component
    listeners: {
        render: function (cmp) {
            cmp.getEl().on('click', function () {
                Ext.getCmp('paypalRadio').setValue(true);
            });
        }
    }
}