在复选框选择 ExtJS 上启用/禁用文本字段答案

【问题标题】：Enable/Disable text field on checkbox selection ExtJS在复选框选择 ExtJS 上启用/禁用文本字段
【发布时间】：2013-03-01 14:46:31
【问题描述】：

我正在使用 ExtJS 3，当我选择/取消选择复选框时，我需要启用/禁用特定的文本字段，如下面的示例所示：

{ 
    fieldLabel: 'myCheckBox'
    xtype: 'checkbox',
    name: 'myCheckBox'
},{
    fieldLabel: 'myTextField'
    xtype: 'textfield',
    name: 'myTextField',
    disabled: true
}

据我了解，我必须像这样在“myCheckBox”中使用监听器：

listeners: {
   change: function() {

   }
}

但我不知道将哪些参数传递给我的函数以及如何定位 'myTextField' 和 .enable() .disable() 它。你能帮我么？非常感谢。

基于答案的解决方案（谢谢）：

listeners: {
     change: function(cb, checked) {
         Ext.getCmp('myTextField').setDisabled(!checked);
 }
 }

并将 id 标签添加到 textfield 组件中，如下所示：

id: 'myTextField'

【问题讨论】：

感谢 Mark Peters 和 Ankit 的正确回答。我已经在解决方案中使用了它们，我已经为其他有相同问题疑问的人添加到初始问题中

标签： extjs checkbox

【解决方案1】：

如果您不确定将什么作为参数传递，则 Ext.getCmp() 会为您提供组件。它将组件的 id 作为参数。在您的情况下，您必须将 id 分配给文本字段，并且可以在更改事件中将其作为 Ext.getCmp('myTextField') 获取。其中 myTextField 是文本字段的 id。组件的名称和标识可以相同。

listeners: {
 change: function() {
     Ext.getCmp('myTextField').disable();
     //or
     Ext.getCmp('myTextField').enable();
 }
}

【讨论】：

【解决方案2】：

有几种方法可以引用myTextField。最简单的可能是给该字段一个ref（请注意，这种方法在 ExtJS 4 中不起作用，您最好使用组件查询）：

{
    fieldLabel: 'myTextField'
    xtype: 'textfield',
    name: 'myTextField',
    ref: '../myTextField'
    disabled: true
}

设置 ref 将导致 textfield 组件在其所有者或其祖先之一的属性中被引用。那么你的监听器可以简单地是这样的（传递给这个函数的参数是listed in the doc）：

change: function(cb, checked) {
    me.myTextField.setDisabled(!checked);
}

您可能需要根据您的组件层次结构调整 ref 路径。

【讨论】：

【解决方案3】：

例子：

使用 setDisabled API： theStudentForm.findField('stud_name').setDisabled(true);
使用 setOpacity API： theStudentForm.findField('stud_name').labelEl.setOpacity(1);
使用只读 API： theStudentForm.findField('stud_name').setReadOnly(true);

【讨论】：