extjs - 启用和禁用文本字段，以便用户有一个文本字段来在 extjs 中输入数据

Question

启用或禁用文本字段，以便用户只能启用一个文本字段来输入数据。

解释 ：

如果它们是两个文本字段：textfield1，textfield2。如果用户希望在textfield1中输入数据，则应该禁用textfield2 。在这种情况下：用户在textfield1中输入数据并希望输入textfield2而不是textfield1 ，然后应该从textfield1中清除数据，并且应该禁用它并启用 textfield2。

示例代码：我不知道使用哪些事件侦听器来获取此功能。

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

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

    }
}

请帮我解决这个问题。

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

        });