ext 监听机制

标签：ext

好了，接下来我们来看一下ext是如何实现监听的

首先，他为我们定义了监听的一个借口，

该接口继承了许多类的方法，如，

通过这个借口，我们就能定义我们的监听类了，如下：

Ext.define(‘Employee‘, {
    mixins: [‘Ext.mixin.Observable‘]

    constructor: function (config) {
        //通过下面的构造函数将config的参数进行初始化，很重要
        this.mixins.observable.constructor.call(this, config);
    }
});

var newEmployee = new Employee({
    name: ‘Li‘,
    listeners: {
        quit: function() {
            // 自定义触发事件
            alert(this.name + " has quit!");
        }
    }
});//我们用如下方法进行测试，是不是很简单呢
    if(newEmployee.hasListeners.quits){
        newEmployee.fireEvent(‘quits‘);
        }

好了我们继续往下走：

在这个基类下，他有一个listeners属性，怎么用呢，API里面是这样说的：

While some Ext JS Component classes export selected DOM events (e.g. "click", "mouseover" etc), this is usually only done when extra value can be added. For example the DataView‘s itemclick event passing the node clicked on. To access DOM events directly from a child element of a Component, we need to specify the element option to identify the Component property to add a DOM listener to:

如果你想为容器等其他增加一个单击事件，那么只需给该容器绑定一个元素element，DOM事件会直接对element这个元素执行

如下：

var panel=Ext.create(‘Ext.panel.Panel‘,{
        width:300,
        height:200,
        title:‘yes‘,
        items:[
            {
                xtype:‘button‘,
                html:‘123‘,
                width:50,
                margin:‘25 0 0 20‘,
                listeners: {
        click: {
            element: ‘el‘, //bind to the underlying el property on the panel
            fn: function(){ alert(‘click el‘); }
            }
        }
                }
        ],
         listeners: {
        dblclick: {
            element: ‘body‘, //bind to the underlying body property on the panel
            fn: function(){ alert(‘dblclick body‘); }
        }
    },
        renderTo:Ext.getBody()    
        })

=============================================================================

接下来我们再来看看如何增加监听

该基类为我们提供了一个addListeners方法，我们来看一下是如何使用的：

先来定义一个类：

Ext.define(‘Father‘,{
            extend:‘Ext.panel.Panel‘,
            title:‘yes‘,
            onMouseOver:function(){alert(‘onMouseOver‘);},
            onMouseOut:function(){alert(‘onMouseOut‘);},
            items:[
            {
                xtype:‘button‘,
                html:‘clickme‘,
                id:‘kk‘
                }
            ],
            renderTo:Ext.getBody()
            
        });

var father=Ext.create(‘Father‘,{
            width:300,
            height:500,
            });

第一种监听方法：

    father.on(‘mouseover‘, father.onMouseOver, this);

第二种：

    father.on({
            mouseover: {fn: father.onMouseOver, scope: this, single: true},
            cellClick: {fn: this.onMouseOver, scope:ll}
        });

第三种：

    father.on({
    cellClick: {fn: ‘onCellClick‘, scope: this, single: true},//这里的single表示只允许单机一次，scope表示作用域必填
    mouseover: {fn: ‘onMouseOver‘, scope: father}
});

用Ext.get(‘kk‘).on(‘click‘,function(){
            father.fireEvent(‘mouseover‘);
            })来检验，不过今天小海我发现了设置了scope的作用域后，fireEvent依旧执行，不知道是不是bug，感觉好奇怪，当然了。如果你发现了怎么使用这个scope你也可以告诉我，一起进步，一起学习嘛。好了，这一节我们就暂时到这吧

ext 监听机制

标签：ext

原文地址：http://9197823.blog.51cto.com/9187823/1641507