如何在extjs中動態改變文本字段的fieldCls？

Question

在我們的應用程序中，我們有一個文本框和一個複選框。默認情況下，textfield應該是隻讀的。每當選中複選框時，textfield應該是可編輯的。

我們能夠做到上述要求。但是，我們還必須以這樣的方式顯示文本字段，以便用戶在只讀時不會編輯它。

我們用於此下面的代碼：

{ 
    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

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

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

，也沒有指定fieldCls:'x-item-disabled'作爲配置的文本字段將由setDisabled方法進行自動管理，如果您想先呈現文本字段被禁用，則您可以在配置使用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 
    } 
    ... 
}