Extjs学习笔记

Ext.onReady(function(){

   //创建一个新的组件

   Ext.create('Ext.window.Window',{

     title:'nihao',

     height:400,

     width:200,

     layout:'fit',

     constrain:true,//限制窗口不超出浏览器

     renderTo:Ext.getBody()//新创建的组件渲染到什么位置

    

   }).show();

});

ConstraintHeader:不允许标题的窗口超出浏览器边界.

Modal:指定是不是模态窗口

autoScroll:滚动条

icon:通标（加图片路径）

iconCls:图片样式

draggable:false,//不允许拖拽

resizable:false,//不允许改变大小

closable:false,//不显示关闭按钮

 

items:[//添加子组件

     {

        xtype:'panel',

        width:'40%',

        height:120,

        html:'我是面板'

     },

     {

        xtype:'button',

        text:'按钮',

        handler:function(btn){

          alert(btn.text)

        }

     }],

tbar://表示向当前组件中的top位置添加工具条

     [

        {},

        {}

     ],

Bbar:[{},{}]//在窗体底部添加状态栏

lbar:[{},{}]//在窗体左部添加状态栏

rbar:[{},{}]//在窗体右添加状态栏

fbar:[{},{}]//在窗体最最底部添加状态栏

 

凡是组件都会有up与down方法分别是查找父组件与查找子组件

Ext.getCom(‘id’)//通过id获取组件

xxx.ownerCt取这一级元素的上一级元素

 

Ext.onReady(function(){

 

        

         //ex003:用windowGroup对象去操作多个window窗口

         var wingroup = new Ext.WindowGroup();

         for(var i = 1 ; i <=5;i++){

                   var win =Ext.create('Ext.Window',{

                            title:'第' + i + '个窗口' ,

                            id:'win_' + i ,

                            width:300 ,

                            height:300 ,

                            renderTo:Ext.getBody()

                   });

                   win.show();

                   wingroup.register(win);                   //把窗体对象注册给ZindexManger

         }

        

         var btn1 =Ext.create('Ext.button.Button',{

                   text:'全部隐藏' ,

                   renderTo:Ext.getBody(),

                   handler:function(){

                            wingroup.hideAll();                  //隐藏所有被管理起来的window组件

                   }

         });

        

         var btn2 = new Ext.button.Button({

                   text:'全部显示' ,

                   renderTo:Ext.getBody(),

                   handler:function(){

                            wingroup.each(function(cmp){

                                     cmp.show();

                            });

                   }                

         });

        

         var btn3 = new Ext.button.Button({

                   text:'把第三个窗口显示在最前端' ,

                   renderTo:Ext.getBody(),

                   handler:function(){

                            wingroup.bringToFront('win_3');//把当前的组件显示到最前端

                   }                

         });    

        

        

         var btn4 = new Ext.button.Button({

                   text:'把第五个窗口显示在最末端' ,

                   renderTo:Ext.getBody(),

                   handler:function(){

                            wingroup.sendToBack('win_5');    //把当前的组件显示到最后

                   }                

         });             

        

        

});

 

Config:配置项就是配置当前配置项的属性内容，并且会自动加上get与set 方法,

 

Ext中定义一个类

Ext.define(‘Person’,{

Config://用config定义参数这样的话就自动生成了get与set 方法

{

         Name:’dfas’,

Age:’ds’

}

Say:function(){

         Alert(我是方法)

}

 

Constructor:function(config){

   Var me=this

   Me.initConfig(config);//通过构造函数初始化参数

}

});

 

Ext底层继承得javaScript实现

Ext静态块

Ext:requires,uses,singlon

Ext.apply&Ext.applyIf

Ext方法覆盖

//Ext对原生javascript对象的扩展

      //提示信息

/* Ext.MessageBox.alert('我是标题!' , 'Hello World!' , function(){

      console.info(this);

      alert('我是回调函数!');

   } ,this);

   Ext.Msg.alert('提示信息','ExtJS!!!');*/

   //询问框

Ext.Msg.confirm('提示信息','确认删除该条记录么?',function(op){

        // yes on

      if(op =='yes'){

           alert('确认了!');

        }else{

           alert('取消了!');

      }

   });

 

//输入框

//String title, String msg,[Function fn], [Object scope], [Boolean/Number multiline], [String value]

   Ext.Msg.prompt('我是标题!','请输入姓名:' , function(op, val){

      //op ok cancel

      console.info(op);

      console.info(val);

   } , this ,true ,'张三');

//等待框也就是我们所说的进度条

Ext.Msg.wait('提示信息','我是内容' ,{

            interval:400,        //循环定时的间隔

            duration:2000,      //总时长

            increment:5,       //执行进度条的次数

            text:'更新中,请稍后...',//进度条上的文字

            scope:this,

            fn:function(){

             alert('更新成功!');

            },

            animate:true //更新渲染时提供一个动画效果

});

 

   //show方法

Ext.Msg.show({

       title:'我是自定义的提示框!!' ,

       msg:'我是内容!!' ,

       width:300 ,

       height:300 ,

       buttons:Ext.Msg.YESNOCANCEL ,

       icon:Ext.Msg.WARNING// ERROR INFO QUESTION WARNING

});

 

 

// 第二个作用:通常用于递归操作

// arguments.callee 表示引用当前函数本身

function fact(number){

   if(number <= 1){

      return 1 ;

   }else{

      returnnumber*arguments.callee(number-1);

   }

};

 

// This 关键字在javascript里的使用

//this关键字总是指向调用者，谁调用函数，this就指向谁

var x = 5;// window.x = 5 ;

function test(){

   alert(this.x);  

};

test.x = 10;

window.test();

 

 

// call apply 主要作用是绑定作用域

var color ='red';

var obj = {color:'yellow'};

//

functionshowColor(x,y,z){

   alert(x+y+z);

   alert(this.color);

};

call、apply绑定一个函数，到你指定的作用域内执行

showColor.call(obj,10,20,30);

showColor.apply(obj,[2,3,4]);

 

   //定义了一个js的类

   var Person =function(name , age){

      this.name = name ;

      this.age = age ;

      // private

      var _sex ='男';//js的私有属性

      this.getSex =function(){

        return _sex ;      

      };

      this.setSex =function(sex){

        _sex= sex ;

      };

   };

 

//单体模式:闭包单体

   var SXT = (function(){

   var Array = {

        each:function(){

           alert('each...');

        }

   };

      return {

      arrayEach:function(){

        Array.each();

        }

   };

   })();

   SXT.arrayEach();

 

 

Ext.onReady(function(){

   //Ext.create方法相当于创建一个实例对象

   Ext.create('Ext.window.Window',{

      title:'我的第一个组件,window' ,

      width:400,   //Number型  也可以是字符串类型  width: '90%'

      height:300,

      layout:'fit' ,

      constrain:true ,   //限制窗口不超出浏览器边界

      modal:true ,       //设置一个模态窗口

      //plain:true ,

      icon:'js/extjs/icons/used/browser_window.png',//字符串参数,图片的路径

      //iconCls:'' ,        //CSS样式

      x:50,

      y:50,

      autoScroll:true,   //添加滚动条

      html:'<div style=width:200px;height:200px>我是一个div</div><divstyle=width:200px;height:200px>我是第二个div</div>' ,

      constrainHeader:true,//不允许该窗口的title超出浏览器边界

      renderTo:Ext.getBody() //新创建的组件渲染到什么位置

   }).show();

});

  

var btn = Ext.get('btn');//这个元素是经过Ext包装的一个Ext的Dom对象//alert(btn.dom.value);

   btn.on('click',function(){

      if(!Ext.getCmp('mywin')){

        Ext.create('Ext.window.Window',{

           id:'mywin' ,    //如果你给组件加了一个id 那么这个组件就会被Ext所管理

           title:'新窗体' ,

           height:300,

           width:400,

           renderTo:Ext.getBody()//,

           //modal:true

        }).show();   

      }

   });

  

   //第二种实现

var win = Ext.create('Ext.window.Window',{

           title:'新窗体' ,

           height:300,

           width:400,

           renderTo:Ext.getBody(),

           closeAction:'hide' //closeAction默认是destroy

             

});

  

Ext.get('btn').on('click',function(){

        win.show();

});

//ex002 : 在组件中添加子组件 ,并进行一系列针对于组件的操作

  

   //在组件中添加子组件：

   varwin = new Ext.window.Window({

      title:"添加子组件实例" ,

      width:'40%' ,

      height:400,

      renderTo:Ext.getBody(),

      draggable:false ,  //不允许拖拽

      resizable:false ,  //不允许改变窗口大小

      closable:false,//不显示关闭按钮

      collapsible:true , //显示折叠按钮

      bodyStyle:'background:#ffc; padding:10px;' ,// 设置样式

      html:'我是window的内容!!' ,

      //Ext items(array) //配置子组件的配置项

      items:[{

        //Ext的组件给我们提供了一个简单的写法  xtype属性去创建组件

        xtype:'panel',

        width:'50%',

        height:100,

        html:'我是面板'

      },

      new Ext.button.Button({

        text:'我是按钮' ,

        handler:function(){

           alert('执行!!');

        }

      })

      {

        xtype:'button' ,

        text:'我是按钮',

        handler:function(btn){

           alert('我被点击了');

           alert(btn.text);

        }

      }

   ]    

});

win.show();

  

   var win =new Ext.Window({

      id:'mywin' ,

      title:'操作组件的形式' ,

      width:500,

      height:300,

      renderTo:Ext.getBody(),

      //表示在当前组件的top位置添加一个工具条里面默认的都是按钮

      tbar:[{       //bbar(bottom)lbar(leftbar)  rbar(rightbar) fbar(footbar)

        text:'按钮1' ,

        handler:function(btn){

           //组件都会有 up、down这两个方法(表示向上、或者向下查找)需要的参数是组件的xtype或者是选择器

           alert(btn.up('window').title);

        }

      },{

        text:'按钮2' ,

        handler:function(btn){

           //最常用的方式

           alert(Ext.getCmp('mywin').title);

        }

      },{

        text:'按钮3' ,

        handler:function(btn){

           //以上一级组件的形式去查找 OwnerCt

           //console.info(btn.ownerCt);

           alert(btn.ownerCt.ownerCt.title);

        }      

      }]   

   });

   win.show();

      //ex003:用windowGroup对象去操作多个window窗口

   var wingroup =newExt.WindowGroup();

   for(var i = 1 ; i <=5;i++){

      var win =Ext.create('Ext.Window',{

        title:'第' + i +'个窗口' ,

        id:'win_' + i ,

        width:300,

        height:300,

        renderTo:Ext.getBody()

      });

      win.show();

      wingroup.register(win);    //把窗体对象注册给ZindexManger

   }

  

   var btn1 =Ext.create('Ext.button.Button',{

      text:'全部隐藏' ,

      renderTo:Ext.getBody(),

      handler:function(){

        wingroup.hideAll();   //隐藏所有被管理起来的window组件

      }

   });

  

   var btn2 =new Ext.button.Button({

      text:'全部显示' ,

      renderTo:Ext.getBody(),

      handler:function(){

        wingroup.each(function(cmp){

           cmp.show();

        });

      }    

   });

  

   var btn3 =new Ext.button.Button({

      text:'把第三个窗口显示在最前端' ,

      renderTo:Ext.getBody(),

      handler:function(){

        wingroup.bringToFront('win_3');//把当前的组件显示到最前端

      }    

   });  

  

  

   var btn4 =new Ext.button.Button({

      text:'把第五个窗口显示在最末端' ,

      renderTo:Ext.getBody(),

      handler:function(){

        wingroup.sendToBack('win_5'); //把当前的组件显示到最后

      }    

   });    

  

   //在Ext中如何去定义一个类: Ext.define(className , properties , callback)

   Ext.define('Person',{

      //这里是对于这个类的一些配置信息

      //config属性就是配置当前类的属性内容,并且会加上get和set方法

      config:{

        name:'z3' ,

        age:20

      },

      //自己定义的方法

      say:function(){

        alert('我是方法...');

      },

      //给当前定义的类加一个构造器 ,目的就是为了初始化信息

      constructor:function(config){

        var me =this ;

//      for(varattr in config){

//         alert(attr+ " : " +config[attr]);

//      }

        me.initConfig(config); // 真正的初始化传递进来的参数

      }

   });

  

   //Ext.create实例化一个对象

   var p = Ext.create('Person',{

      name:'王五' ,

      age:30

   });

   alert(p.getName());

   alert(p.getAge());

   p.say();

   //第13讲:extend

  

   //Ext的继承代码

  

   //Sup Class

   Ext.define('Person',{

      config:{

        name:'bjsxt'

      },

      constructor:function(config){

        var me =this ;

        me.initConfig(config);

      }

   });

   //Sub Class

   Ext.define('Boy',{

      //使用Ext的继承

      extend:'Person',

      config:{

        sex:'男',

        age:20

      }

   });

   var b = Ext.create('Boy',{

      name:'张三',

      age:25

   });

   alert(b.name);

   alert(b.sex);

   alert(b.age);

 

   //第14讲:Ext.define其他配置项

   //别名、备用名

   Ext.define("User",{

      config:{

        name:'bjsxt111' ,

        age:100

      },

      alias:'uu' ,//起别名  底层代码在Ext.ClassManger

      alternateClassName:'uuu',//给当前类一个备用名底层代码在Ext.ClassManger

      constructor:function(config){

        var me =this;

        me.initConfig(config);

      }

   });

    

   var u = Ext.create('uuu');

   alert(u.name);

   alert(u.age);

  

   //statics(子类不能继承) inheritableStatics(子类可以继承)给当前类定义静态方法或属性

   Ext.define('Person',{

      config:{

        name:'我是父类'

      },

      statics:{  //静态的方法或属性

        static_id:'我是Person的id,不能被子类所继承!!'

      },

      inheritableStatics:{  //静态的方法或属性

        inheritableStatics_id:'我是Person的id,我可以被子类继承!!'

      },

      constructor:function(config){

        var me =this;

        me.initConfig(config);

      }

   });

  

   //一定注意:!!!!!//实例对象是无法使用静态属性或方法的

   //var p = Ext.create('Person');

   //alert(p.static_id);

   //用类名去使用静态属性:!!!!

// alert(Person.static_id);

// alert(Person.inheritableStatics_id);

  

   Ext.define('User',{

      extend:'Person' ,

      config:{

        age:20

      }

   });

   alert(User.static_id);

   alert(User.inheritableStatics_id);

  

  

 

 

//mixins 混合的配置项,可以多继承的配置

   Ext.define("Sing",{

      canSing:function(){

        alert('cansing...');

      }

   });

   Ext.define("Say",{

      canSay:function(){

        alert('cansay...');

      }

   });  

   Ext.define('User',{

      mixins:{

        sing:"Sing" ,

        say:"Say"

      }

   });

  

   var u = Ext.create("User");

   u.canSay();

   u.canSing();

 

   //^_^伪代码说明： requires和 uses 以及  singleton

   Ext.define('MyComponent',{

      //可能需要Ext或者是其他的类做支持

      //requires加载需要的类时机是：当前类初始化之前被加载

      requires:['Ext.window.Window','Ext.button.Button']

      //uses加载需要的类时机是：当前类初始化之后被加载

      uses:['Ext.form.Panel','Ext.grid.Panel']

      singleton:true  //当前的类就被当做一个单例对象

   });

 

//Ext.apply & Ext.applyIf

   //Ext.apply就是为对象扩展属性或方法的

   var src = {name:'张三',age:20};  //源对象

   var config = {name:'李四',sex:'男'};//配置对象

   Ext.apply(src, config);

   Ext.applyIf(src,config);//如果当前对象存在属性,我就不进行copy如果不存在则copy

   // name : '李四' age : 20  sex:'男'

   for(var attrin src){

      alert(attr+ " : "+ src[attr]);

   }

 

Ext.Object对原生对象的支持

// Ext对于原生javascript对象的扩展

// Ext Object chain方法

//chain把当前传入对象当成是新创建对象的原型

   varobj = {

      name: 'bjsxt',

      age: 20

   }

   varresult=Ext.Object.chain(obj)

   alert(result.name)

   alert(result.age)

  //each遍历对象的属性,回掉函数中有三个属性key,value,self如果回掉函数中有返回false的停止迭代

   var obj={

      name:'张三',

      age:20,

      sex:'男'

   }

   Ext.Object.each( obj,function(key,value,self){ 

      alert(key+":"+value)       

   })

   //fromQueryString把一系列的字符串转化为对象

   var str="name=fdsf&age=10";

   varobj=Ext.Object.fromQueryString(str)

   alert(Ext.encode(obj))

getkey(obj,value):

通过传入对象，已经对象的属性值，获取对象属性值对应的键值

Getkeys:返回对指定对象所有属性的键值。

GetSize:返回当前对象的属性的个数。

getValues:返回对象的所有属性的属性值

merge:把n个对象互相所没有的属性都加进去了

   //toqueryString把一个对象转换成查询字符串

   var obj={

      name:"zhangsan",

      age:19

   }

  

   alert(Ext.Object.toQueryString(obj))

 

Ext.Number对原生对象的支持

//三个参数:传递的num,minnum最小的num,max最大的num

Ext.Number.constrain(5,1,10)

当前传递的num在最大值与最小值之间返回当前传递的num;如果当前传递的num小于最小值返回最小值，大于最大值则返回最大值。

Ext.Number.randomInt(1,100)

产生一个1-100之间的随机数

Ext.Number.toFixed(3.1415926,5)

//指定当前这个浮点数据，保留几位小数

 

 

 

Ext.String 对javascript原生对象的扩展

Ext.String.capitalize("www")//通过String进行首字母大写

Ext.String.ellipsis("www.bjsxt.com",8)//www.b…

 

 

 

Ext.Array对javascript原生对象的扩展

var array=[1,2,null,3,""]

alert(Ext.Array.clean(array))//1,2,3

   //difference

var arr1 = [1,2,3];

var arr2 = [2,5,6];

alert(Ext.Array.difference(arr1,arr2));//1,3从arr1中剔除arr2中的数据

   //each迭代函数

   var arr = [1,2,3,4];

   Ext.Array.each(arr,  function(item){

        if(item == 4){

           returnfalse ;

        }

      alert(item);

      //当函数内部返回false的时候会停止迭代

   });

   //erase擦除指定位置的指定数据

   var arr = [1,2,3,4,5];

   alert(Ext.Array.erase(arr , 2 , 2));1,2,5擦除后的结果

var arr = [1,2,5,6,9,10];

   var flag =Ext.Array.every(arr,function(item){

      if(item >=7){

      returnfalse ;

      }else {

        returntrue; 

      }

   });

   alert(flag);

//如果数组中的所有的数据都能通过满足校验的回调函数返回true,否则返回false.

   //filter过滤函数，过滤掉18与23

   var arr =[1,2,3,4,10,18,23];

   var newarr = Ext.Array.filter(arr,function(item){

      if(item > 10){

        returnfalse ;

      }else{

        returntrue ;

      }

   });

   alert(newarr);

//include 相当于push方法，如果不包含，就做push操作,如果包含了就不做push操作

   var arr = [1,2,3,4];

   Ext.Array.include(arr , 2);

//unqiue去除重复。EXT的去除方式以及JS的去除方式

   var arr = [1,2,3,4,5,5,4,3,2,1,1,21,23,3,3,4];

   alert(Ext.Array.unique(arr));

   //利用js对象的特性去掉数组的重复项 obj的key是不能重复的

   var obj = {};

   for(var i = 0 , len =arr.length ; i <len ; i++){

        obj[arr[i]]= true;//去掉数组的重复项了

   }

   //alert(Ext.encode(obj));

   var uniquearr = [];

   for(var iin obj){

      if(obj.hasOwnProperty(i)){

        uniquearr.push(i);

      }

   }

   alert(uniquearr);

 

 

 

 

Ext.Function类

   //alias起别名

   var obj = {

      name:'bjsxt',

      say:function(){

        alert(this.name);

      }

   };

   var objsay =Ext.Function.alias(obj ,'say');

   objsay();

  

起别名，通过起别名来提取对象中的方法。

   //bind绑定作用域的就相当于 call、apply

   var color ='red';

   var obj = {

      color:'blue'

   };

   function showColor(){

      alert(this.color);

   }

   Ext.Function.bind(showColor,obj)();

   //defer //window.setTimeout延时处理

   function task(){

      alert('执行!');    

   };

   Ext.Function.defer(task,3000);

 

 

 

Ext.Date类，也就是事件类

//Ext.Date

//between

alert(Ext.Date.between(new Date(2013,07,15) ,new Date(2013,07,03),new Date(2013,07,08)));

//format

alert(Ext.Date.format(new Date() ,'Y-m-d H:i:s'));

//parse

alert(Ext.Date.parse('2010-07-05 21:22:22' ,'Y-m-d H:i:s').toLocaleString());

 

创建窗体:

Ext.create('Ext.window.Window',{

 title:'我是一个窗口',

 height:300,

 width:400,

 constrain:true,

 modal:true,

 html:'我是窗体的内容!!!',

 renderTo:Ext.getBody()

}).show()

//自己定义的一个类：MyWindow

Ext.define('MyWindow' , {

extend:'Ext.window.Window' ,//继承Ext的window类

   title:'我是一个窗口',

   height:300,

   width:400,

   constrain:true ,

   modal:true ,

   html:'我是窗体的内容!!!!' ,

   renderTo:Ext.getBody()  

});

  

   var w1 = Ext.create('MyWindow');

   var w2 = Ext.create('MyWindow',{

      title:'我是w2'

   });

   var w3 = Ext.create('MyWindow',{

      itle:'我是w3'

   });

w2.show();

   //自己定义的一个类：MyWindow

   Ext.define('MyWindow' , {

      extend:'Ext.window.Window',//继承Ext的window类

      title:'我是一个窗口',

      height:300,

      width:400,

      constrain:true ,

      modal:true ,

      html:'我是窗体的内容!!!!' ,

      renderTo:Ext.getBody()  

   });

  

   var w1 = Ext.create('MyWindow');

   var w2 = Ext.create('MyWindow',{

      title:'我是w2'

   });

   var w3 = Ext.create('MyWindow',{

      title:'我是w3'

   });

   w2.show();

 

动态加载自定义的js组件

   //动态加载一个js文件

   //第一步：在js/extjs/添加文件夹 (ux)

//在这个ux文件夹下建立自己的组件所对应的js文件

//第二步：在js/extjs/ux下编写自己的扩展的组件

//自定义组件类名一定要按照包层次路径去编写

Ext.define('js.extjs.ux.MyWindow',{

extend:'Ext.window.Window',

     title:'我是一个窗体',

     height:300,

     width:400,

     constrain:true,

     modal:true,

     html:'我是原窗体',

     rederTo:Ext.getBody() 

})

//第三步：启用ext动态加载的机制并设置要加载的路径

Ext.Loader.setConfig({

   enabled:true ,

   paths:{

      myux:'js/extjs/ux'

   }

});

//第四步：创建类的实例并使用：

Ext.create('js.extjs.ux.MyWindow').show();

   //Ext.dom.Element

   //Ext.get使用了缓存机制来提升获取DOM节点的效率 Ext.Element

  

   //get方法的描述:

   /**

    *1首先去Ext.cache缓存里去查找，如果缓存里有，直接返回即可

    *2如果缓存里没有，那再去页面上去查找，如果页面里没有，返回null

    *3如果页面里有，把当前内容加入到缓存里：{id:{data/events/dom}}

    *4Ext.addCacheEntry加到缓存里的方法

    */

   var d1 = Ext.get('d1'); //Ext.Element

   alert(d1.dom.innerHTML);

  

   //Ext.fly

   /**

    *fly:使用了javascript经典的‘享元模式’来提升效率，从而节约内存，更加低碳化

    *返回的对象：Fly对象，当然你可以理解成为返回的就是Ext封装好的Ext.Element对象

    *注意点：fly由于内部使用了享元模式所以只适合一次操作，从而节省内存

    */

    

    var d2 = Ext.fly('d2');

    vard3 = Ext.fly('d3');

    d2.dom.innerHTML = 'AAA';

    d3.dom.innerHTML ='BBB';

  

  

   //Ext.getDom

   /**

    *直接从页面上获取元素的DOM元素

    */

   var dom = Ext.getDom('d3'); //HTMLElement

   dom.innerHTML="CCCC";

 

 

   //第20讲：

   //查询系方法：

   Vard1=Ext.get(‘d1’)

  Var sp=Ext.get(‘sp’)

   //1: contains：判断元素是否包含另一个元素

   alert(d1.contains(sp));

   alert(d1.contains('sp'));

  

   //2: child：从元素的直接子元素中选择与选择符匹配的元素 (返回的只是一个元素，并不能返回数组) ,2个参数第二个参数是可选的如果为true表示取得的是原生的HTMLElement元素

   var ch1 = d1.child('span');//Ext.dom.Element

   alert(ch.dom.innerHTML);

   var ch2 = d1.child('span',true); //HTMLElement

   alert(ch.innerHTML);

  

   //3: down：选择与选择符匹配的元素的子元素//findParentNode、up：查找与简单选择符匹配的元素的父元素

  

   var ch1 = d1.down('#d2');

   alert(ch1.dom.innerHTML);

  

   //4: first：选择元素第一个子元素 //last：选择元素的最后一个子元素

   var f1 = d1.first('div');

   alert(f1.dom.innerHTML);

   //5: findParent：查找与简单选择符匹配的元素的父元素 //parent：返回元素的父元素

   var parent = sp.findParent('div');

   alert(parent.innerHTML);

  

   //6: is：判断元素是否匹配选择符

   alert(d1.is('div'));

  

   //7: next：选择元素同层的下一个元素 //prew：选择元素同层的上一个元素

   var next = sp.next();

   alert(next.dom.nodeName);

   //8: Ext.query：根据选择符获取元素 (Ext.dom.Element.query)

   var arr = Ext.query('span','d1');//HTMLElement[]

   Ext.Array.each(arr, function(item){

      alert(item.innerHTML);

   });

   //9: Ext.select/Ext.dom.Element.select：根据选择符获取元素集合

   //返回的都是元素集合:Ext.dom.CompositeElementLite(HTMLElemennt)/Ext.dom.CompositeElement(Ext.dom.Element)

   //参数说明： 3个参数，

   //1：selector 选择器  (不要使用id选择器)

   // 2：返回的集合对象（boolean false:Ext.dom.CompositeElementLite true:Ext.dom.CompositeElement）

   // 3:指定的根节点开始查找

var list1 = Ext.select('span',false,'d1');//Ext.dom.CompositeElementLite

   Ext.Array.each(list1.elements,function(el){

        alert(el.innerHTML);

   });

var list2 = Ext.select('span',true,'d1');//Ext.dom.CompositeElement

   Ext.Array.each(list2.elements,function(el){

        alert(el.dom.innerHTML);

   });  

 

 

   //操作dom系的方法：

   1:appendTo：将当前元素追加到指定元素中（这2个元素都必须存在document里）

   sp.appendTo(Ext.get('d2'));

   sp.appendTo('d2');

   2:appendChild：在当前元素中追加元素

   sp.appendChild('d2');

   3:createChild：在元素中插入由DomHelper对象创建的元素

   sp.createChild({

      tag:'ol' ,   //orderlist  unorderlist

      children:[

        {tag:'li' ,html:'item1'},

        {tag:'li' ,html:'item2'}

      ]

   });

  

   //4:inertAfter：将元素插入到指定元素之后

   5:inertBefore：将元素插入到指定元素之前

   6:inertSibling：在当前元素前或后插入（或创建）元素（同层）。

   7:insertHtml：在当前元素内插入HTML代码

   8:replace：使用当前元素替换指定元素

   9:replaceWith：使用创建的元素替换当前的元素

  

   10:remove：移除当前元素

   sp.remove();

   11:wrap：创建一个元素，并将当前元素包裹起来。

   sp.wrap('<h1></h1>');

  

   //操作样式系的方法：

   1：addCls：增加CSS样式到元素，重复的样式会自动过滤

   sp.addCls('red');

   2:applyStyles：设置元素的style属性

   sp.applyStyles('backgroundColor:blue');

   sp.applyStyles({backgroundColor:'yellow'});

   3:setStyle：为元素设置样式

   sp.setStyle('backgroundColor','green');

   sp.setStyle('fontSize','40px');

   4:getStyle：返回元素的当前样式和计算样式

   alert(sp.getStyle('fontSize'));

   alert(Ext.encode(sp.getStyle(['fontSize','backgroundColor'])));

   5:getStyleSize：返回元素的样式尺寸

   alert(Ext.encode(sp.getStyleSize()));

   6:setOpacity：设置不透明度

   var d2 = Ext.get('d2');

   d2.setStyle('backgroundColor','red');

  

   d2.setStyle('width','200px');

   d2.setStyle('height','200px');

   d2.setOpacity(.3);  // 0~1

   7:addClsOnClick添加样式当点击该元素的时候

   var d2 = Ext.get('d2');

   d2.addClsOnClick('red');

   8:addClsOnOver添加样式当鼠标移动到元素上的时候

   var d2 = Ext.get('d2');

   d2.addClsOnOver('red'); 

   9:getMargin：返回值具有top、left、right、bottom属性的对象，属性值为响应的元素margin值。

   var d2 = Ext.get('d2');

   alert(d2.getMargin('b'));//r l t b

   alert(Ext.encode(d2.getMargin()));

   10:removeCls：删除元素的样式

   var d2 = Ext.get('d2');

   d2.addCls('red');       //String/String[] className

   d2.removeCls('red');    //String/String[]className

  

   //11:尺寸、定位

   var d2 = Ext.get('d2');

   alert(Ext.encode(d2.getSize()));

   alert(d2.getX());

   alert(Ext.encode(d2.getXY()));

   sp.moveTo(100,100);

 

//操作dom系的方法：

   1:appendTo：将当前元素追加到指定元素中（这2个元素都必须存在document里）

   sp.appendTo(Ext.get('d2'));

   sp.appendTo('d2');

   2:appendChild：在当前元素中追加元素

   sp.appendChild('d2');

   3:createChild：在元素中插入由DomHelper对象创建的元素

   sp.createChild({

      tag:'ol' ,   //orderlist  unorderlist

      children:[

        {tag:'li' ,html:'item1'},

        {tag:'li' ,html:'item2'}

      ]

   });

  

   4:inertAfter：将元素插入到指定元素之后

   5:inertBefore：将元素插入到指定元素之前

   6:inertSibling：在当前元素前或后插入（或创建）元素（同层）。

   7:insertHtml：在当前元素内插入HTML代码

   8:replace：使用当前元素替换指定元素

   9:replaceWith：使用创建的元素替换当前的元素

  

   10:remove：移除当前元素

   sp.remove();

   11:wrap：创建一个元素，并将当前元素包裹起来。

   sp.wrap('<h1></h1>');

   //操作样式系的方法：

   //1：addCls：增加CSS样式到元素，重复的样式会自动过滤

   sp.addCls('red');

   //2:applyStyles：设置元素的style属性

   sp.applyStyles('backgroundColor:blue');

   sp.applyStyles({backgroundColor:'yellow'});

   //3:setStyle：为元素设置样式

   sp.setStyle('backgroundColor','green');

   sp.setStyle('fontSize','40px');

   //4:getStyle：返回元素的当前样式和计算样式

   alert(sp.getStyle('fontSize'));

   alert(Ext.encode(sp.getStyle(['fontSize','backgroundColor'])));

   //5:getStyleSize：返回元素的样式尺寸

   alert(Ext.encode(sp.getStyleSize()));

   //6:setOpacity：设置不透明度

   var d2 = Ext.get('d2');

   d2.setStyle('backgroundColor','red');

   d2.setStyle('width','200px');

   d2.setStyle('height','200px');

   d2.setOpacity(.3);  // 0~1

   //7:addClsOnClick添加样式当点击该元素的时候

   var d2 = Ext.get('d2');

   d2.addClsOnClick('red');

   //8:addClsOnOver添加样式当鼠标移动到元素上的时候

   var d2 = Ext.get('d2');

   d2.addClsOnOver('red'); 

   //9:getMargin：返回值具有top、left、right、bottom属性的对象，属性值为响应的元素margin值。

   var d2 = Ext.get('d2');

   alert(d2.getMargin('b'));//r l t b

   alert(Ext.encode(d2.getMargin()));

   //10:removeCls：删除元素的样式 

   var d2 = Ext.get('d2');

   d2.addCls('red');       //String/String[] className

   d2.removeCls('red');    //String/String[]className

  

   //11:尺寸、定位

   var d2 = Ext.get('d2');

   alert(Ext.encode(d2.getSize()));

   alert(d2.getX());

   alert(Ext.encode(d2.getXY()));

   sp.moveTo(100,100);

 

第22讲：

一：为元素添加事件

   //1 : addKepMap：为元素创建一个KeyMap对象

   var inp = Ext.get('inp');

   inp.addKeyMap({     //Ext.util.KeyMap====>Class

      key:Ext.EventObject.A,       //Ext.EventObject

       ctrl:true ,

      fn:function(){

        alert('按ctrl+A，执行!!');

      },

      scope:this

   });

   //2 : addKeyListener：为KeyMap绑定事件

   //参数说明： String/Number/Number[]/Object key, Functionfn, [Object scope]

   var inp = Ext.get('inp');

   inp.addKeyListener({

      key:Ext.EventObject.X, 

      ctrl:false

   },

   function(){

      alert('x执行了..');

   }

   },

   this);

   //二：元素绑定常用事件

   var inp= Ext.get('inp');

   inp.on('click',function(){

      alert('执行了...');

   });

   inp.un('click');

   inp.focus();

  

  

   //三:其他重要且常用的方法：

   var inp = Ext.get('inp');

   var sp = Ext.get('sp');

   //1: center：使元素居中

   inp.center('d1');

   //2: clean：清理空白的文本节点

   //3: createShim：为元素创建一个iframe垫片保证选择或其他对象跨域时可见

   //4: getLoader：返回ElementLoader对象//11: load：直接调用ElementLoader的load方法为元素加载内容

   var loader =inp.getLoader();//ElementLoader

   loader.load({

      url:'base/004_base06_dom2_loader.jsp',

      renderer:function(loader,response){

//      //把对象转换成字符串表示形式：Ext.encode

//      //把一个字符串转换成javascript对象： Ext.decode

        var obj =Ext.decode(response.responseText);

        Ext.getDom('inp').value = obj.name ;

      }

   });

   //5: highlight高亮显示特效

   sp.highlight();

  

   //6: show、hide显示隐藏元素   //fadeIn、fadeOout淡入淡出

      var d2 = Ext.get('d2');

      d2.setStyle('width','100px');

      d2.setStyle('height','100px');

      d2.setStyle('backgroundColor','red');

      d2.show({duration:2000});

      d2.hide({duration:2000});

  

   //7: ghost 元素移动特效

      d2.ghost('b', { duration: 2000 });// r/b/l/t

  

   //8: slideIn、slideOut向上向下滑动

       d2.slideIn('b',{duration: 2000});

       d2.slideOut('r',{duration: 2000});

  

   //9: getValue：如果元素有value属性，返回其值

       alert(inp.getValue());

  

   //10: normalize：将CSS属性中的连接符号去掉，例如将“font-size”转为fontSize这样。

  

   //11 :mask：遮罩当前元素，屏蔽用户操作。unmask：移除遮罩

   Ext.getBody().mask('请稍等..');

      window.setTimeout(function(){

        Ext.getBody().unmask();

      },2000);

   Ext.defer(function(){

      Ext.getBody().unmask();

   },2000);

  

   //12: repaint：强迫浏览器重新绘画元素

  

   //13: serializeForm：序列化为URL编码的字符串

   alert(Ext.dom.Element.serializeForm('f1'));

  

   //14: update：更新元素的innerHTML属性

  

   //15:unselectable：禁用文本选择 

   inp.unselectable();

  

//Ext.Dom.Helper

   //1: createHtml或markup方法

   //配置项说明：

   //tag元素的名称 

   //children/cn表示子元素

   //cls表示样式 

   //html:文本内容

   var html =Ext.DomHelper.createHtml({

      tag:'ol' ,

      cn:[

        {tag:'li',html:'item1'},

        {tag:'li',html:'item2'}

      ]

   });

   console.info(html);

  

   var html =Ext.DomHelper.createHtml({

      tag:'div' ,

      children:[

        {tag:'a' ,html:'bjsxt网站' , href:'www.bjsxt.cn'},

        {tag:'input' , value:'点击' , type:'button' }

      ]

   });

// console.info(html);

  

   //2: createDom方法 (这个方法是生成原生的dom节点，不推荐使用)

   var dom =Ext.DomHelper.createDom({

      tag:'div' ,

      html:'我是div'

   });

   console.info(dom);

   alert(dom.nodeName);

  

   //3: append方法

   Ext.DomHelper.append('d1',{

      tag:'ul' ,

      cn:[{tag:'li',html:'1111'},{tag:'li',html:'2222'}]

   });

   Ext.DomHelper.append('d1','<span>我是span内容</span>');

  

   //4:insertHtml方法 //这个方法就是为了操作原生的node节点的

   //参数说明：String where, HTMLElement/TextNode el, Stringhtml

   //Ext.DomHelper.insertHtml('beforeBegin',Ext.getDom('d1'),'<h1>我是标题!!</h1>')

  

   //5:overwrite方法

   Ext.DomHelper.overwrite('d1',{tag:'span',html:'我是覆盖的span'});

   Ext.DomHelper.overwrite('d1','aaaaa');

  

   //6:createTemplate方法

   var tp =Ext.DomHelper.createTemplate('<h1>{text}</h1><h2>{text2}</h2>');//return Ext.Template

   tp.overwrite('d1',{text:'我是被替换的内容!!',text2:'我也是替换的内容!!'});

  

   //7:applyStyles方法

   Ext.DomHelper.applyStyles('d1',{

      width:'100px',

      height:'100px',

      backgroundColor:'green'

   });

 

Ext.Dom.Query

   Ext.create('Ext.Panel',{

      title:'Ext.DomQuery示例',

      width:500,

      height:400,

      renderTo:Ext.getBody(),

      html:'<ul><li>item1</li><li>item2</li></ul><divid=d1><span id=sp>我是sp内容</span><spanclass=mycolor>我是第二个span</span></div>'

   });

  

  

   //Ext.DomQuery.select == Ext.query  //返回内容:HTMLElement[]

   ///Ext.DomQuery.jsSelect：根据选择符选择元素 （这个方法和Ext.DomQuery.select差不多）

   //我把他分为三大类：

   //基本选择器 id选择器css的类选择器标签选择器（简单选择器）

   //属性选择器、伪类选择器（也可以说是相当于JQ过滤选择器）（复杂选择器）

  

  

  

   Ext.query('span')     返回整个文档的span标签

   //1 Ext.query('span' , 'root')   根据跟节点进行查询

   var arr = Ext.query('span' ,'d1');

   Ext.Array.each(arr,function(el){

      alert(el.innerHTML);

   });

   //2 Ext.query('#id')    根据id进行查询，但返回数组

   var arr = Ext.query('#d1');

   Ext.Array.each(arr,function(el){

      alert(el.innerHTML);

   });  

  

   //3 Ext.query('.class') 根据样式进行查询，返回数组

   var arr = Ext.query('.mycolor');

   Ext.Array.each(arr,function(el){

      alert(el.innerHTML);

   });  

   //Ext.query('*')匹配所有元素

   alert(Ext.query('*'));

  

   //复杂选择器：

   //1 :Ext.query('div span') 根据标签进行包含选择器过滤

   var arr = Ext.query('div[id=d1] span');

   Ext.Array.each(arr,function(el){

      alert(el.innerHTML);

   });

   //1.1:Ext.query('E>F')  进行一个层次查找父节点为E的F节点

   var arr = Ext.query('div>span');   //Xpath:div/span查找xml文件比较实用

   Ext.Array.each(arr,function(el){

      alert(el.innerHTML);

   });  

  

   //2 :属性选择器Ext.query('E[attr=val]')   进行一个属性的选择匹配

   var arr = Ext.query('div[id*=d]');

   Ext.Array.each(arr,function(el){

      alert(el.id);

   });  

   //3:伪类选择器

   //E:first-child

   var arr = Ext.query('li:first-child');

   Ext.Array.each(arr,function(el){

   alert(el.innerHTML);

 }

});    

  

  

   //Ext.DomQuery其他方法：

   //1：compile：将选择符或xpath编译成一个可重复使用的函数

   var fn =Ext.DomQuery.compile('span');

   alert(fn);

   var arr = fn(Ext.getDom('d1'));

   Ext.Array.each(arr,function(el){

      alert(el.innerHTML);

   });  

   //2: filter：使用简单选择符过滤元素数组

   //参数说明 HTMLElement[] el, String selector, Boolean nonMatches

   var arr =document.getElementsByTagName('div');

   var filterarr =Ext.DomQuery.filter(arr,'div[id=d1]',false);

   Ext.Array.each(filterarr,function(el){

      alert(el.id);

   });    

   //is：判断元素是否匹配简单选择符

   alert(Ext.DomQuery.is(Ext.getDom('d1'),'div[id]'));

 

Ext事件模型

 

// 1: 在早些时候,是不存在事件这个概念的,开发者用javascript2个函数去模拟事件的机制(window.setTimeout/window.setInterval)

// 2: 由于很多原因比如效率太低,人们开始发明了最原始的 0级dom事件模型为元素添加一个事件 在事件上绑定一个处理函数 

//    注意：这种模型有一个致命的硬伤：就是不能为元素的事件添加多个处理函数

window.onload = function(){

   var inp =document.createElement('input');

   inp.id= 'inp1';

   inp.value= '点击' ;

   inp.type= 'button';

   inp.οnclick= function(){

      alert('执行了..');

   };

   inp.οnclick= function(){

      //alert(this == window);

      alert(this == inp);

      alert('我也执行了..');

   };

   document.body.appendChild(inp);

};

function test1(){alert(this == window);};

function test2(){alert(22);};

// 3: 在0级dom事件模型有了以后，才成立了 w3c，觉得0级事件模型不好退出了 2级事件模型 (标准dom事件模型)

element.addEventListener(type,listener,useCapture);

element.removeEventListener(type,listener,useCapture);

window.onload = function(){

   var inp =document.createElement('input');

   inp.id= 'inp1';

   inp.value= '点击' ;

   inp.type= 'button';

   // type :事件类型   listener :这个事件的绑定函数   useCapure(boolean):(事件传播：true=捕获 / false=冒泡)

   inp.addEventListener('click' ,test1 ,false );

   inp.removeEventListener('click' ,test1 ,false );

   inp.addEventListener('click' ,test2 ,false );

   document.body.appendChild(inp);

   //IE浏览器 678事件用：attachEvent(); detachEvent();  IE9/IE10已经支持w3c的标准了

   var inp =document.createElement('input');

   inp.id= 'inp1';

   inp.value= '点击' ;

   inp.type= 'button';

   inp.attachEvent('onclick' ,test1);

   inp.detachEvent('onclick' ,test1);

   inp.attachEvent('onclick' ,test2);

   document.body.appendChild(inp);

};

// 对于事件的传播机制： w3c：1捕获    2 目标(命中) 3 冒泡

// w3c 提供了一个关键字 event事件对象  / ie: 6.7.8  window.event

window.onload = function(){

  

   var inp =document.createElement('input');

   inp.id= 'inp1';

   inp.value= '点击';

   inp.type= 'button';

   inp.addEventListener('click',function(event){

      alert('input执行...');

      event.stopPropagation(); //阻止冒泡事件的发生

   },false);

//

   var div =document.createElement('div');

   div.addEventListener('click',function(){

      alert('div执行...');

   },false);

  

   document.body.addEventListener('click',function(){

      alert('body执行...');

   },false);

  

   div.appendChild(inp);

   document.body.appendChild(div);

};

 

EXT高级事件处理模型,1通过observable进行自定义事件

// 要利用观察者模式去实现自定义的事件

 

 

   //1：由于浏览器他自己能定义内置的事件(click/blur...)

   //  我们也应该有一个类似于浏览器这样的类，这个类自己去内部定义一些事件(自定义事件)

   varObservable = function(){

      //承装自己所定义的事件类型的

      this.events= ['start','stop'];

      //我们应该设计一种数据类型，这种数据类型就可以去维护自定义事件类型和相关绑定函数的关系,结构如下所示：

  

      this.listeners= {

 

      };

   };

  

   //2:添加新的自定义事件类型：

   Observable.prototype.addEvents= function(eventname){

      this.events.push(eventname);

   };

  

  

   //3:为自己的事件类型绑定响应的函数(添加事件监听)

Observable.prototype.addListener =function(eventname,fn){

      //做一个容错的处理

      if(this.events.indexOf(eventname)== -1){

        this.addEvents(eventname);

      }

      //到这一步，必然存在这个事件类型了

      vararr = this.listeners[eventname];

      //如果当前这个函数数组不存在，那么我们要为这个事件类型绑定新添加的函数

      if(!arr){

        arr= [fn];

      }else { //如果存在当前这个事件类型所对应的函数的数组不为空

        if(arr.indexOf(fn)== -1){

              arr.push(fn);

        }

      }

      //重新维护一下事件类型和所绑定的函数数组的关联关系

      this.listeners[eventname]= arr ;

   };

  

   //4:移除事件监听

   Observable.prototype.removeListener= function(eventname,fn){

      //如果你要移除的事件类型，在我的对象里没有被定义

      if(this.events.indexOf(eventname)== -1){

        return;

      }

      //到这一步就是你要移除的事件类型是我当前对象里面存在的

      vararr = this.listeners[eventname];

      if(!arr){

        return;

      }

      //到这一步证明arr里面是有绑定函数的

      //判断如果当前fn函数在我的函数数组里存着就移除

      if(arr.indexOf(fn)!= -1){ 

        arr.splice(arr.indexOf(fn),1);

      }

   };

 

   //5:如何让事件触发:就是调用这个事件类型所对应的所有的函数执行即可

   Observable.prototype.fireEvent= function(eventname){

      //如果当前没有传递事件类型名称或者当前传递的事件类型不存在我的对象里，直接返回

      if(!eventname|| (this.events.indexOf(eventname) == -1)){

        return;

      }

      //到这一步一定存在这个事件

      vararr = this.listeners[eventname];

      if(!arr){

        return;

      } 

      for(vari = 0 , len = arr.length ; i < len ; i ++){

           varfn = arr[i];

           fn.call(fn,this);

      }

   };

  

   //javascript的习惯 给原型对象的方法起一个简单的名字方便开发者去使用

   Observable.prototype.on= Observable.prototype.addListener;

   Observable.prototype.un= Observable.prototype.removeListener;

   Observable.prototype.fr= Observable.prototype.fireEvent;

  

  

  

   //Observable浏览器：

   varob = new Observable(); //被观察者

   // 子类 继承Observable    //观察者

   varfn1 = function(){

      alert('fn1....');

   };

   ob.on('start',fn1);

  

   varfn2 = function(){

      alert('fn2....');

   };

   ob.on('start',fn2);

  

   //移除监听

   ob.un('start',fn1);

   ob.fr('start');

   //ob.fr('stop');

  

   ob.on('run',function(){

      alert('run....');

   });

   ob.fr('run');

  

  

  

   //Ext.util.Observable类是为了为开发者提供一个自定义事件的接口

   //Ext.util.Observable

   //观察者模式：(报社、订阅者)被观察者、观察者

   //Ext.util.Observable被观察者

   //所有继承(混入)Ext.util.Observable类的对象(子类) 观察者

  

EXT高级事件处理模型,2通过Ext.eventManage进行自定义事件

 

//Ext.EventManager ：封装浏览器自带的事件，并且解决了浏览器的差异问题

var MyExt = {};

// 封装浏览器自带的事件屏蔽浏览器之间的差异

MyExt.EventManager = {

  

   //添加监听element, eventName,fn, useCapture

   addListener:function(el , ename , fn, useCapture){

      if(el.addEventListener){

        el.addEventListener(ename,fn,useCapture);

      }elseif(el.attachEvent){

        el.attachEvent('on' + ename , fn);

      }

   },

   //移除监听

   removeListener:function(el , ename , fn, useCapture){

      if(el.removeEventListener){

        el.removeEventListener(ename,fn,useCapture);

      }elseif(el.detachEvent){

        el.detachEvent('on' + ename , fn);

      }

   }

   //w3c === event   /ie  window.event

   //getEvent:function(){}

   //鼠标事件

   //键盘事件

   //滚轮事件...

};

MyExt.EventManager.on =MyExt.EventManager.addListener;

MyExt.EventManager.un =MyExt.EventManager.removeListener;

window.onload = function(){

   var btn =document.getElementById('btn');

   MyExt.EventManager.on(btn,'click',function(){

      alert('我执行了..');

   },false);

   MyExt.EventManager.on(btn,'click',function(){

      alert('我又执行了..');

   },false);

};

//Ext.EventManager

//Ext.util.Observable

//on un

 

Ext.Manager 事件

 

Ext.onReady(function(){

   //Ext.EventManager:把浏览器自带的事件做个封装，目的是屏蔽浏览器之间的差异问题

   // on添加事件监听  un移除事件监听

  

   var inp =document.createElement('input');  //Ext.DomHelper.createDom

   inp.type= 'button';

   inp.id= 'inp1';

   inp.value= '点击';

   document.body.appendChild(inp);

  

   var einp = Ext.get('inp1');

   Ext.EventManager.on(einp,'click',function(){

   alert('我执行了..');

   });

   Ext.EventManager.on(einp,'click',function(){

      alert('我又执行了..');

   });  

  

   Ext.EventManager.on(einp,{

      'click':function(){alert('单机!')} ,

      'mouseout':function(){alert('移除!')}

   });

   //不推荐

   Ext.EventManager.on(einp,{

      'click':{

        fn:function(){

           alert('执行1');

        }

      },

       'mouseout':{      

            fn:function(){

           alert('执行2');

        }

      }

   });

  

});

 

//web300: ex 005  为Ext的UI组件绑定事件

   //1:直接在组件内部添加listeners配置项即可

   var win = Ext.create('Ext.Window',{

      title:'UI组件的事件示例一' ,

      width:400,

      height:300,

      renderTo:Ext.getBody(),

      listeners:{   //在这个配置项对象中加入事件即可

        show: function(){

           alert('我展示出来了...');

        },

        close:function(){

           alert('我被关闭了....');

        },

        render:function(){

           alert('组件渲染的时候执行的事件..');

        },

        click:{

               element: 'body', //bind to theunderlying body property on the panel

               fn: function(){ alert('click body'); }

        }

      }

   });

   win.show();

  

  

  

   //2：使用组件的引用为组件绑定一些事件

   var win = Ext.create('Ext.Window',{

      title:'UI组件的事件示例一' ,

      width:400,

      height:300,

      renderTo:Ext.getBody()    //把组件渲染到指定的位置(body)

   });

   win.on('show',function(){

      alert('我展示出来了..');

   });  

  

   win.on({

      'show':function(){

           alert('show...');    

      },

      'close':function(){

           alert('close...');

      },

      'render':function(){

           alert('render....');

      }

   });

   win.show();

 

简单事件，事件的监听，转发，恢复，挂起

 

 

//1：最简单的自定义事件：

   var win = Ext.create('Ext.Window',{

      title:'简单的自定义事件' ,

      width:300,

      height:200,

      renderTo:Ext.getBody(),

      listeners:{

        show:function(){

           //3:触发自定义事件的时机

           win.fireEvent('myEvent');

        }

      }

   });

   //1:添加事件类型

   win.addEvents('myEvent');

   //2:添加事件的监听

   win.on('myEvent' ,function(){

      alert('my....event...');

   });

   win.show();

  

   //2:为自己定义的类去添加事件的支持

   Ext.define('Employee', {

       mixins: {

           observable: 'Ext.util.Observable'

       },

       constructor: function (config) {

          this.mixins.observable.constructor.call(this, config);

           this.addEvents(

               'fired',

               'quit'

           );

       }

   });

   var newEmployee =new Employee({

       listeners: {

           quit: function() {

               alert(" has quit!");

           }

       }

   });

   newEmployee.fireEvent('quit');

  

  

  

   //ex007:单次运行监听器的使用，single配置项在组件中的用途

   var win = Ext.create('Ext.Window',{

      title:'单次执行监听器的使用' ,

      width:300,

      height:200,

      renderTo:Ext.getBody(),

      listeners:{

        render:function(){

           alert('把组件渲染到body上，整个过程只有一次');

        },

        single:true, //当前这个事件监听执行一次之后就自动销毁了

        delay:3000   //延迟执行事件监听

      }

   });

   win.show();

  

   //ex008：对于事件的挂起和恢复实例

   var btn1 = Ext.create('Ext.button.Button',{

      text:'挂起' ,

      renderTo:Ext.getBody(),

      handler:function(){

         btn3.suspendEvents();

      }

   });

   var btn2 = Ext.create('Ext.button.Button',{

      text:'恢复' ,

      renderTo:Ext.getBody(),

      handler:function(){

        btn3.resumeEvents();

      }

   });

   var btn3 = Ext.create('Ext.button.Button',{

      text:'按钮' ,

      renderTo:Ext.getBody(),

      listeners:{

        'mouseover':function(){

           alert("执行啦...");

        }

      }

   });  

  

   //ex009：事件的转发机制

   var win = Ext.create('Ext.Window',{

      title:'事件的转发' ,

      renderTo:Ext.getBody(),

      width:300,

      height:200,

      listeners:{

        myEvent:function(){

           alert('我是自己定义的事件...');

        }

      }

   });

  

   var btn = Ext.create('Ext.Button',{

      text:'按钮' ,

      renderTo:Ext.getBody(),

      handler:function(){

        btn.fireEvent('myEvent');

      }

   });

   win.show();

   //事件的转发机制： 1转发给的对象    2 转发的事件类型数组

   win.relayEvents(btn,['myEvent']);