5

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

3 回答 3

5

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

listeners: {
 change: function() {
     Ext.getCmp('myTextField').disable();
     //or
     Ext.getCmp('myTextField').enable();
 }
}
于 2013-03-01T15:27:49.543 回答
2

有几种方法可以参考myTextField。最简单的可能是给该字段一个ref(请注意,这种方法在 ExtJS 4 中不起作用,您最好使用组件查询):

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

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

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

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

于 2013-03-01T14:57:56.700 回答
1

例子:

  1. 使用 setDisabled API:theStudentForm.findField('stud_name').setDisabled(true);

  2. 使用 setOpacity API:theStudentForm.findField('stud_name').labelEl.setOpacity(1);

  3. 使用只读 API:theStudentForm.findField('stud_name').setReadOnly(true);

于 2014-10-09T09:51:21.747 回答