如何在Ext JS中移除disabled属性？按钮启用文本框无效问题

嘿，我一眼就瞅出问题所在啦！你现在的代码没法启用文本框，核心原因是操作对象错了：

• 你用Ext.get('name')获取到的是页面上的DOM元素，而不是ExtJS的Textfield组件实例。直接修改DOM的disabled属性，没法触发ExtJS组件内部的状态更新（比如样式变化、组件的可用状态标记），所以点击按钮后看起来毫无反应。

正确的解决步骤 #

要启用这个文本框，得用ExtJS组件的标准API来操作：

1. 获取组件实例：用Ext.getCmp('name')替代Ext.get('name')，这是ExtJS中通过组件id获取对应实例的正确方式。
2. 调用组件API修改状态：使用组件的setDisabled(false)方法来启用它，这个方法会自动同步DOM属性、组件样式和内部状态，确保文本框真正可用。

修改后的按钮代码 #

{ 
  margin: '0 50 0 50', 
  padding: '10 20 10 20', 
  xtype: 'button', 
  text: "Create", 
  listeners: { 
    click: function() { 
      // 获取Textfield组件实例并启用
      Ext.getCmp('name').setDisabled(false); 
    } 
  } 
}

额外小建议 #

如果你的项目比较复杂，尽量避免用Ext.getCmp()（因为id是全局唯一的，容易出现冲突），可以给文本框添加reference属性，然后通过组件的lookupReference方法来获取：

比如文本框配置加一行：

reference: 'surveyName'

按钮的点击事件改成：

click: function(btn) {
  btn.up('form').lookupReference('surveyName').setDisabled(false);
}

这样代码会更健壮，也更符合ExtJS的最佳实践~

内容的提问来源于stack exchange，提问作者harunB10