Sencha Touch学习笔记（五）事件

事件的监听

我们可以通过配置listeners来监听事件，比如下面一个panel渲染到屏幕上的时候：

Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create('Ext.Panel', {
            html: 'My Panel',
            fullscreen: true,

            listeners: {
                painted: function() {
                    Ext.Msg.alert('I was painted to the screen');
                }
            }
        });
    }
});

这是一个painted事件。

你可以通过官方API来查看一个组件拥有哪些事件：

通过配置listeners:来灵活处理事件发生时你想实现的逻辑。
再举个简单的例子，按钮tap手势事件：

Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.Viewport.add({
            xtype: 'button',
            centered: true,
            text: 'My Button',

            listeners: {
                tap: function() {
                    alert("You tapped me");
                }
            }
        });
    }
});

这是一个tap事件。

由于大多数类在运行时可重构，这意味着你可以改变他们的配置，如高度，宽度，或内容在任何时间，该组件将正确地更新自己的屏幕上。事件触发的名字如widthchange，hiddenchange和centeredchange。

前面的例子事件通过类被实例化时配置listeners来完成。如果我们已经有一个实例，我们仍然可以添加侦听器后使用功能：

Ext.application({
    name: 'Sencha',

    launch: function() {
        var myButton = Ext.Viewport.add({
            xtype: 'button',
            centered: true,
            text: 'Click me'
        });

        myButton.on('tap', function() {
            alert("Event listener attached by .on");
        });
    }
});

没错，就是 实例.on(‘事件’，function（）{…})
通过这种方式你还可以对一个事件多次监听。

Ext.application({
    name: 'Sencha',

    launch: function() {
        var myButton = Ext.Viewport.add({
            xtype: 'button',
            centered: true,
            text: 'Click me',

            listeners: {
                tap: function() {
                    alert('First tap listener');
                }
            }
        });

        myButton.on('tap', function() {
            alert("Second tap listener");
        });

    }
});

当然一个on中也可以配置多个事件：

Ext.application({
    name: 'Sencha',

    launch: function() {
        var myButton = Ext.Viewport.add({
            xtype: 'button',
            centered: true,
            text: 'Click me'
        });

        myButton.on({
            tap: function() {
                var randomWidth = 100 + Math.round(Math.random() * 200);

                this.setWidth(randomWidth);
            },
            widthchange: function(button, newWidth, oldWidth) {
                alert('My width changed from ' + oldWidth + ' to ' + newWidth);
            }
        });
    }
});

可以添加事件监听的话，我们也可以删除它：

Ext.application({
    name: 'Sencha',

    launch: function() {
        var doSomething = function() {
            alert('handler called');
        };

        var myButton = Ext.Viewport.add({
            xtype: 'button',
            text: 'My Button',
            centered: true,

            listeners: {
                tap: doSomething
            }
        });

        Ext.defer(function() {
            myButton.un('tap', doSomething);
        }, 3000);
    }
});

三秒内提示框出现，三秒后事件监听被移除了，再进行tap时提示框不再出现。

额外选项

有一些额外的选项你可以通过listeners配置，scope，single，buffer。

scope

Scope 指定你的监听函数处理的范围：

Ext.application({
    name: 'Sencha',

    launch: function() {
        var myButton = Ext.Viewport.add({
            xtype: 'button',
            centered: true,
            text: 'Click me'
        });

        var panel = Ext.create('Ext.Panel', {
            html: 'Panel HTML'
        });

        myButton.on({
            tap: {
                scope: panel,
                fn: function() {
                    alert("Running in Panel's scope");
                    alert(this.getHtml());
                }
            }
        });
    }
});

正常的情况下，触发按钮的事件后，监听函数中的this是指按钮本身，但是当配置了scope之后，this指的是scope的值。

single

有时候，有的事件我们只想监听一次怎么办？就要配置single：true

Ext.application({
    name: 'Sencha',

    launch: function() {
        var myButton = Ext.Viewport.add({
           xtype: 'button',
           centered: true,
           text: 'Click me',

           listeners: {
               tap: {
                   single: true,
                   fn: function() {
                       alert("I will say this only once");
                   }
               }
           }
        });
    }
});

这样，只有第一次tap才弹出提示框，之后就再也不弹出了。

buffer

对于多次监听在很短的时间的事件，我们可以减少我们监听的数量称为使用缓存配置。在这种情况下我们的按钮的点击监听每2秒调只用一次，不管有多少次你点击它：

Ext.application({
    name: 'Sencha',

    launch: function() {
        var myButton = Ext.Viewport.add({
           xtype: 'button',
           centered: true,
           text: 'Click me',

           listeners: {
               tap: {
                   buffer: 2000,
                   fn: function() {
                       alert("I will say this only once every 2 seconds");
                   }
               }
           }
        });
    }
});

自定义事件

有时候我们需要自己定义一些事件，并且需要传递参数。

Ext.application({
    name: 'Sencha',

    launch: function() {
        var myButton = Ext.Viewport.add({
           xtype: 'button',
           centered: true,
           text: "Just wait 2 seconds",

           listeners: {
               myEvent: function(button, points) {
                   alert('myEvent was fired! You score ' + points + ' points');
               }
           }
        });

        Ext.defer(function() {
            var number = Math.ceil(Math.random() * 100);

            myButton.fireEvent('myEvent', myButton, number);
        }, 2000);
    }
});

再次通过通过Ext.defer()方法延迟2秒执行其中的代码，通过按钮的fireEvent()启动事件，第一个参数是你自己定义的事件名，后面两个参数是你定义监听函数的时候指定的参数。