Question

我正在使用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'

Answer 1

如果您不确定要作为参数传递什么，那么Ext.getCmp（）会为您提供组件。它将组件的id作为参数。在您的情况下，您必须将id分配给textfield，并且可以在更改事件中将其作为Ext.getCmp（'myTextField'）获取。 myTextField是textfield的id。组件的名称和ID可以相同。

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

Answer 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路径，具体取决于您的组件层次结构。

Answer 3

示例：

使用setDisabled API： theStudentForm.findField（＆＃39; stud_name＆＃39）。setDisabled（真）;
使用setOpacity API： theStudentForm.findField（＆＃39; stud_name＆＃39）。labelEl.setOpacity（1）;
使用readOnly API： theStudentForm.findField（＆＃39; stud_name＆＃39）。setReadOnly（真）;

启用/禁用复选框选择ExtJS上的文本字段

3 个答案: