Question

我对Ext Js中的所有绑定和配置都不是很熟悉。所以我有一个带有电子邮件（mailto）按钮的文本字段。我想启用或停用按钮。但我不知道如何开始处理触发器本身。所以我尝试在我的ViewController中进行绑定，如下所示：

txtContactEmail:{
   disabled: {someFunctionInViewModel}
}//this disables/enables the whole control 
 //I only want the trigger button to be disabled/enabled

这是在sencha架构师中创建的视图中的代码。

{
     xtype: 'textfield',
     flex: 2,
     itemId: 'txtContactEmail',
     margin: '0 5 0 0',
     fieldLabel: 'Email',
     labelWidth: 35,
     validateOnChange: false,
     validateOnBlur: false,
     triggers: {
           trgEntityEmail: {
                cls: 'x-form-email-trigger'
           }
     }
}

Answer 1

只是为了看到触发器的绑定，这个内联代码可能会有所帮助。它将文本字段的hideTrigger配置绑定到View Model属性。这个Fiddle有工作代码。

 Ext.create('Ext.form.field.Text', {
        viewModel: {
            data: {
               x: false
            }
        },
        flex: 2,
        itemId: 'txtContactEmail',
        margin: '0 5 0 0',
        fieldLabel: 'Email',
        labelWidth: 35,
        validateOnChange: false,
        validateOnBlur: false,
        //Bind to x property of View Model
        bind: {
           hideTrigger: '{!x}'
        },
        triggers: {
              trgEntityEmail: {
                   cls: 'x-form-email-trigger' 
                }
        }
    });

另一种方法是将hideTrigger配置绑定到文本字段的其他配置，例如。值。此内联代码显示了此方法。您可以查看here.

Ext.create('Ext.form.field.Text', {
                viewModel:{},
                flex: 2,
                itemId: 'txtContactEmail',
                margin: '0 5 0 0',
                fieldLabel: 'Email',
                labelWidth: 35,
                validateOnChange: false,
                validateOnBlur: false,
                //Set a reference on textfield and publish its value
                // Use this reference to do the binding
                value: 'Some Value',
                reference: 'mytextfield',
                publishes: ['value'],
                bind: {
                    hideTrigger: '{mytextfield.value}'
                },
                triggers: {
                    trgEntityEmail: {
                        cls: 'x-form-email-trigger'
                    }
                }
            });

Answer 2

Ext.field.trigger.Trigger无法启用/禁用开箱即用。

我认为你可以像这样模仿禁用状态

var myTrigger = myTextField.getTriggers()['trgEntityEmail'];
// Apply disabled style with .setCls() or .setIconCls()
myTrigger.setIconCls('my-disabled-icon');
// Remove handler
myTrigger.sethandler(Ext.emptyFn);

禁用/启用文本字段中的触发器

2 个答案: