wKiom1VHgDTDZyYKAAG-UAtMpZo364.jpg

上一节我们主要讲了如何添加事件,这一节我们要进一步对这些方法进行详解

概述:addManager它是由调用的组件管理的,当组件执行了销毁的命令的时候所有被组件管制的事件全部销毁,他等价于mon

创建工具条,利用items属性添加三个按钮create delete撤销删除按钮

       利用button中的handler点击事件来执行动作。调用destroy方法撤销delete按钮(HTML中的idget方法获取,而在组件指定的id需要用getCmp方法来获取)      

       delete按钮中添加受管理的组件的事件机制。addManagedListener方法来添加

       参数:第一个指定的是组件   第二个是事件类型  第三个是此事件的动作

       流程:点击create按钮指定动作。在点击撤销删除按钮的时候将delete按钮删除,并且它管理的事件全部销毁,这时点击create无效果

    

var tbar=Ext.create("Ext.toolbar.Toolbar",{  
  
                   renderTo:Ext.getBody(),  
  
                   width:400,  
  
                   items:[  
  
                          {xtype:"button",id:"create",text:"create"},  
  
                          {xtype:"button",id:"delete",text:"delete"},  
  
                          {xtype:"button",text:"撤销删除按钮",handler:function(){  
  
                                 var c=Ext.getCmp("delete");  
  
                                 if(c){  
  
                                        c.destroy();  
  
                                 }  
  
                          }}  
  
                   ]  
  
            });     
  
            var deleteB=Ext.getCmp("delete");  
  
            deleteB.addManagedListener(Ext.getCmp("create"),"click",function(){  
  
                   alert("添加操作");  
  
            });

其实在5.0后,一般不需要addManagedListener来对我们的事件进行监管,ext会自动帮我们执行,如文档说所:As of version 5.1 it is no longer necessary to use this method in most cases because listeners are automatically managed if the scope object provided to addListeneris an Observable instance. However, if the observable instance and scope are not the same object you still need to use mon or addManagedListener if you want the listener to be managed.代码如下:

Ext.define('Mother',{
            extend:'Ext.panel.Panel',
            name:'Li',
            eat:function(){alert('I\'m eating')},
            })
            Ext.define('Father',{
                extend:'Ext.panel.Panel',
                name:'Li',
                eat:function(){alert('I\'m eating')},
            })
        var mother=Ext.create('Mother');
        var father=Ext.create('Father');    
        mother.on('eat',mother.eat,father);
        Ext.destroy(father);
        if(mother.hasListeners.eat){
            alert(1);
            }

另一个与他相反的函数是clearManagedListener,他负责对ManagedListener进行清除,等价于mun,在这小海我就不给大家敲了,只是将该方法放在对象名后就可以了。

对于createAlias这个函数来说,小海觉得好像是个鸡肋,说白了,就和alias差不多,知不过是复制方法的,代码如下:

    

Ext.define('My.cool.Class', {
    method1: function() { ... },
    method2: function() { ... }
});

var test = new My.cool.Class();

My.cool.Class.createAlias({
    method3: 'method1',
    method4: 'method2'
});

test.method3(); // test.method1()

My.cool.Class.createAlias('method5', 'method3');

test.method5(); // test.method3() -> test.method1()

我们来看看这三个函数,,is来恢复,该事件会一直保持这个状态,第二个表示是否为暂停转态,第三个恢复暂停,代码如下:

Ext.define('Mother',{
            extend:'Ext.panel.Panel',
            name:'Li',
            eat:function(){alert('I\'m eating')},
            /*listeners:{
                kk:function(){alert('I\'m eating')}
                }*/
            })
            
        var mother=Ext.create('Mother');
        mother.on('kk',mother.eat);
        Ext.define('Father',{
                extend:'Ext.panel.Panel',
                initComponent: function () {
                this.addManagedListener(mother,'kk',this.self.eat);
                this.callParent();
            }
            })
        var father=Ext.create('Father');    
        
        Ext.destroy(father);
        //mother.clearListeners();
        //alert(mother.isSuspended())
        if(mother.hasListeners.kk){
            mother.suspendEvent('kk');
            mother.resumeEvent('kk');
            mother.fireEvent('kk');
            }

对所有监听进行清除,就有用到clearlistenter这个函数了,如:mother.clearListeners();

最后我们来看看最后一个函数:override

他有一个参数,表示要修改的类名,作用是对类中的方法进行重写,代码如下:

Ext.define('My.Cat', {
   constructor: function() {
       alert("I'm a cat!");
   }});My.Cat.override({
   constructor: function() {
       alert("I'm going to be a cat!");

       this.callParent(arguments);

       alert("Meeeeoooowwww");
   }});var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                         // alerts "I'm a cat!"
                         // alerts "Meeeeoooowwww"
Direct use of this method should be rare. Use Ext.defineinstead:
Ext.define('My.CatOverride', {
   override: 'My.Cat',
   constructor: function() {
       alert("I'm going to be a cat!");

       this.callParent(arguments);

       alert("Meeeeoooowwww");
   }});

好了这一节就到这里吧,下一节小海就要好好去研究一下组件了,当然,如果我写得不对,欢迎指正,相互学习嘛,好了,小海今天累了,想睡了