Sencha Touch 事件

Sencha Touch 作为一款基于 JavaScript 的移动 Web 应用开发框架，为我们提供了丰富的事件处理机制。在应用开发中，事件处理是至关重要的环节，合理的事件处理可以使应用更加稳定，同时也可以使应用更加丰富和灵活。

在 Sencha Touch 中，事件处理主要涉及以下几个方面：

1. Sencha Touch 事件模型
2. 事件处理示例
3. 自定义事件处理
4. 注册事件处理程序

Sencha Touch 事件模型

Sencha Touch 事件模型以 Ext.mixin.Observable 为核心，在继承该类后，我们可以轻松地对对象绑定和触发事件。

由于 Ext.mixin.Observable 对象的事件模型，使得不同的对象之间可以很容易地进行事件通信，这也是 Sencha Touch 开发中最常见的事件处理方式。

事件处理示例

接下来，我们通过一个简单的例子来说明 Sencha Touch 事件的处理方式：

Ext.define('MyApp.view.Main', {
    extend: 'Ext.Container',
    
    config: {
        items: [{
            xtype: 'button',
            text: 'Click Me',
            itemId: 'myButton'
        }]
    },

    initialize: function() {
        this.callParent();
        this.down('#myButton').on('tap', this.onButtonTap, this);
    },

    onButtonTap: function() {
        Ext.Msg.alert('Button Tapped!');
    }
});

在该例子中，我们创建了一个含有一个按钮的容器，当用户点击按钮时，触发 onButtonTap() 方法，弹出一个提示框。

自定义事件处理

继承 Ext.mixin.Observable 后，我们可以使用 fireEvent() 方法触发自定义事件：

Ext.define('MyApp.model.User', {
    extend: 'Ext.data.Model',
    mixins: ['Ext.mixin.Observable'],

    config: {
        fields: ['name', 'age']
    },

    constructor: function(config) {
        this.callParent(arguments);
        this.addEvents(
            'setName',
            'setAge'
        );
    },

    setName: function(name) {
        this.set('name', name);
        this.fireEvent('setName', name);
    },

    setAge: function(age) {
        this.set('age', age);
        this.fireEvent('setAge', age);
    }
});

var user = Ext.create('MyApp.model.User');
user.on('setName', function(name) {
    console.log('Name has been set to ' + name);
});

user.setName('Tom');

在该例子中，我们创建了一个 User 模型，并绑定了 setName 和 setAge 两个自定义事件，每当 setName 或 setAge 方法被调用时，将触发对应的自定义事件。

注册事件处理程序

我们可以使用 Ext.on() 或 Ext.Viewport.on() 注册全局事件处理程序，例如：

Ext.Viewport.on('orientationchange', function(viewport, orientation, width, height) {
    console.log('Orientation has changed');
});

在该例子中，我们注册了一个 Viewport 的 orientationchange 事件处理程序，当屏幕方向发生改变时，将触发该处理程序。