extjs - 如何在extjs中动态更改文本字段的fieldCls？

Question

在我们的应用程序中，我们有一个文本字段和一个复选框。默认情况下，文本字段应该是只读的。每当选中复选框时，文本字段都应该是可编辑的。

我们能够满足上述要求。但我们还必须以这样的方式显示文本字段，当它是只读的时，用户应该感觉他们无法编辑它。

我们为此使用了以下代码:

{
   xtype:'textfield',
   id:'textfieldid',
   readOnly:true,
   fieldCls:'x-item-disabled'
    ...
}


{
    xtype:'checkbox',
    listeners:{
        change:function(thisCmp,newValue,oldValue){
                if(newValue==true){
                    Ext.getCmp('textfieldid').addCls('x-item-disabled');
                } else {
                    Ext.getCmp('textfieldid').removeCls('x-item-disabled');
                }
            }
    }
}

但有些我无法让它工作。

有人可以建议解决这个问题的方法吗？

实际上我需要提交该字段。如果禁用，则不会提交该字段。所以我尝试动态设置 fieldCls。

Answer 1

你不能使用Ext.form.field.Text的setDisabled方法吗？

{
    xtype:'checkbox',
    listeners:{
        change:function(thisCmp,newValue,oldValue){
             Ext.getCmp('textfieldid').setDisabled(newValue);
        }
    }
}

并且也不要指定 fieldCls:'x-item-disabled' 作为将由 setDisabled 方法自动管理的 TextField 的配置，如果您想最初将文本字段渲染为禁用，然后您可以在配置中使用 disabled : true 像这样

{
   xtype:'textfield',
   id:'textfieldid',
   disabled: true
    ...
}

另一种选择:

您最初使用 fieldCls 属性来指定禁用类，这可能是错误的，您可以执行类似的操作

{
   xtype:'textfield',
   id:'textfieldid',
   readOnly:true,
   listeners : {
       afterrender : function() {
            this.addCls('x-item-disabled');
       },
       scope : this
   }
    ...
}