代码实现的目的：为一个自定义的类的某个属性在使用它时候，触发某个事件。 该程序的效果：点击输入按钮，弹出一个脚本提示输入框让用户输入他的姓名，确定后，用户录入的姓名会显示在页面的姓名文本框中，并且页面标题变成和姓名一致，接着再弹出脚本提示输入框让用户输入性别，录入完毕并点击确定后，用户录入的性别将会显示在页面的性别文本框里。 代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html x
在本文中，我们将深入探讨ExtJs的事件机制，以及如何在一个基本的代码模型中实现它。我们要理解事件在JavaScript和ExtJs中的核心概念。事件是用户与应用程序交互时发生的动作，例如点击按钮或输入数据。ExtJs提供了一种优雅的方式来处理这些事件，使得我们可以轻松地响应用户操作。
在描述的示例中，我们创建了一个自定义的`Person`类，当用户输入姓名和性别时，会触发相应的事件。这个程序通过按钮点击事件来启动，先让用户输入姓名，然后显示在页面的文本框中，并更新页面标题；接着用户输入性别，性别也会显示在页面的另一个文本框里。
我们来看一下`Person`类的定义：
```javascript
Ext.namespace('Ext.dojochina');
Ext.dojochina.Person = function() {
this.addEvents('namechange', 'sexchange');
};
```
这里，`addEvents`方法用于声明`Person`类支持的事件类型，即`namechange`和`sexchange`。这是ExtJs的`Observable`类的一个特性，允许我们定义和管理事件。
`Ext.util.Observable`是ExtJs提供的基础事件处理类，我们可以让`Person`类继承自它，以便利用其事件处理功能：
```javascript
Ext.extend(Ext.dojochina.Person, Ext.util.Observable, {
name: "",
sex: "",
// ...
});
```
接下来，我们在`Person`类中定义了`setName`和`setSex`方法，这两个方法分别用于更改姓名和性别。在修改属性值时，如果新值与旧值不同，就会触发对应的事件：
```javascript
setName: function(_name) {
if (this.name != _name) {
this.name = _name;
this.fireEvent('namechange', this, this.name, this.name);
}
},
setSex: function(_sex) {
if (this.sex != _sex) {
this.sex = _sex;
this.fireEvent('sexchange', this, this.sex, this.sex);
}
}
```
`fireEvent`方法用来触发已声明的事件，传入的参数包括事件名、当前对象以及旧值和新值。
在`Ext.onReady`函数中，我们创建了一个`Person`对象，并为其添加了事件监听器：
```javascript
_person = new Ext.dojochina.Person();
_person.on('namechange', function(_person, _old, _new) {
// 更新文本框、提示和标题
});
_person.on('sexchange', function(_person, _old, _new) {
// 更新文本框
});
```
当`namechange`事件触发时，我们更新了文本框的值、弹出提示并改变页面标题。`sexchange`事件触发时，仅更新了性别文本框的值。
按钮的点击事件`button_click`调用`setName`和`setSex`方法，触发`Person`对象的事件，进而完成整个流程。
总结来说，ExtJs事件机制的核心在于`Observable`类，它提供了添加事件、触发事件和监听事件的功能。通过定义事件，我们可以在对象的状态发生变化时执行特定的回调函数，从而实现业务逻辑。在上述例子中，我们创建了一个简单的用户输入交互，展示了如何在自定义类中使用事件来驱动UI的变化。理解和掌握这一机制对于开发复杂的ExtJs应用程序至关重要，因为它使得代码更加模块化，易于维护和扩展。
