Enable and disable a textfield so that user has one textfield to input the data in extjs

Question

To enable or disable a textfield so that user can have only one textfield enabled to input data.

Explanation :

If their are two textfields : textfield1, textfield2. If user wishes to enter data in textfield1 then textfield2 should be disabled. In this scenario : User inputs the data in textfield1 and wishes that he wants to enter the input for textfield2 instead of textfield1 , then data should be cleared from textfield1 and it should be disabled and textfield2 should be enabled.

Sample Code : I m not aware which event listeners to use to get this functionality.

{
    xtype: 'textfield',
    width: 215,
    fieldLabel: 'Source1',
    id: 'textfield1',
    listeners: {

    }
}, {
    xtype: 'textfield',
    id: 'textfield2',
    width: 215,
    fieldLabel: 'Source2',
    listeners: {

    }
}

Please help me out relove this issue.

Answer 1

        Ext.require([
            'Ext.form.*'
        ]);

        Ext.onReady(function() {

            var formPanel = Ext.create('Ext.form.Panel', {
                frame: true,
                title: 'Form Fields',
                renderTo: Ext.getBody(),
                width: 340,
                bodyPadding: 5,

                fieldDefaults: {
                    labelAlign: 'left',
                    labelWidth: 90,
                    anchor: '100%'
                },

                items: [{
                        id: 'ftf1',
                        xtype: 'textfield',
                        name: 'textfield1',
                        fieldLabel: 'Text field1',
                        value: ''
                    },{
                        id: 'ftf2',
                        xtype: 'textfield',
                        name: 'textfield2',
                        fieldLabel: 'Text field2',
                        value: ''                            
                    }]
            });

            var ftf1 = Ext.getCmp('ftf1');
            ftf1.on('change', function(ftf1, newValue, oldValue, eOpts ) {
                if (newValue.valueOf()!='') {
                    Ext.getCmp('ftf2').disable();
                } else {
                    Ext.getCmp('ftf2').enable();
                }
            })
            var ftf2 = Ext.getCmp('ftf2');
            ftf2.on('change', function(ftf2, newValue, oldValue, eOpts ) {
                if (newValue.valueOf()!='') {
                    Ext.getCmp('ftf1').disable();
                } else {
                    Ext.getCmp('ftf1').enable();
                }
            })

        });