深入浅出ExtJS 第二章 Ext框架基础

 1 2.1 面向对象的基础架构(对象模型) 2 2.1.1 创建类 3   >.定义一个类: 4   Ext.define('demo.Demo',{ 5     name:'Lingo', 6     hello:function () { 7       return 'Hello'+this.name; 8     } 9   });10   //第一个参数是字符串类型的类名;11   //第二个参数是object类型,其中可以填写这个类型的字段和函数;12   >.创建一个对象:13   var demo = new demo.Demo();14 15 2.1.2 对象继承(extend)16   Ext.define('demo.DemoWindow',{17     extend:'Ext.Window',        //继承Ext.Window的所有功能;18     title:'demo title',         //扩展(设置标题);19     initComponent:function(){   //初始化时默认添加两个子组件;20       Ext.apply(this,{          //apply()将一批属性批量复制给当前对象;21         items:[{html:'panel1'},{html:'panel2'}]22       });23       this.callParent();        //callParent()函数实现对父类函数的快捷调用;24     }25   });26 27 2.1.3 多重继承(mixin)28   Ext.define('demo.DemoPanel',{29     extend:'Ext.Window',        //单根继承30     mixins:['demo.Demo']        //混入(多重继承);将类'demo.Demo'的属性都复制给新类;31   });32 33 2.1.4 自动生成代码34   Ext.define('demo.DemoObject',{35     statices:{ TYPE_DEFAULT : 0 },  //设置静态成员,无须创建对象即可直接调用的属性或函数;36     constructor: function() {       //在创建对象时执行初始化的构造函数;37       //do some init;38     }39   })

 1 2.2 统一的组件模型 2 2.2.1 Ext.Component 3 //所有Ext组件的基类,组件下所有的子类都可能参与自动化Ext组件的生命周期,执行创建/渲染和销毁; 4   var box = new Ext.Component({ 5     el: 'test', 6     style: 'background-color:red; position:absoulte', 7     pageX: 100, 8     pageY: 50,, 9     width: 200,10     height: 150 11   });12   box.render();13 14 2.2.2 Ext.Panel15 //Ext.Panel继承自Ext.Container;也可无须继承即可直接使用;16   var panel = new Ext.Panel({17     el:'test',18     title:'测试标题',19     floating:true,20     shadow:true,21     draggable:true,22     collapsible:true,23     html:'测试内容',24     pageX:100,25     pageY:50,26     width:200,27     height:15028   });29   panel.render();30 31 2.2.3 Ext.Container32 //继承自Ext.Component;所有可布局组件的超类;33 //参数layout:指定当前组件使用何种布局;34 //参数items:包含的是当前组件中所有子组件;35   new Ext.Viewport({36     layout:'border',37     items:[{38       xtype:'panel'39       region:'north'40     },{41       region:'south'42     },{43       region:'west'44     },{45       region:'east'46     },{47       region:'center'48     }]49   });

  1 2.3 完善的事件机制(事件模型)  2 2.3.1 自定义事件  3 //所有继承自Ext.util.Observable类的控件都可以支持事件;  4 //为这些类的对象定义一些事件,为事件配置监听器;  5 //当某个事件被触发,Ext会自动调用对应的监听器,这就是Ext事件模型;  6   >1.Person类  7   Person = function(name){      8     this.name = name;  9     this.addEvents("walk","eat","sleep");    10     //初始化时调用addEvents()定义了3个事件; 11   } 12   Ext.extend(Person,Ext.util.Observable,{    13     //Person继承Observable所有属性; 14     info:function(){           15       return this.name+"is"+event+"ing."; 16     } 17   }); 18   >2.为person添加事件监听器 19   var person = new Person('Lingo'); 20   person.on('walk',function(){ 21     //on()是addListener()的简写形式; 22     //参数一:传递事件名称; 23     //参数二:事件发生时执行的函数; 24     Ext.Msg.alert('event',person.name+"在走啊走.") 25   }); 26   >3.触发person的事件 27   Ext.get('walk').on('click',function(){       28   //给walk按钮绑定点击事件; 29     person.fireEvent('walk');          30     //fireEvent()传入一个事件名称作为参数,该事件对应的监听函数就会执行; 31   }); 32  33 2.3.2 浏览器事件 34 //Ext使用Ext.EventManager/Ext.EventObject/Ext.libEvent对原生浏览器事件进行封装; 35 //原生事件处理是通过单一的绑定实现的,但每次只能给一个事件绑定一个事件处理函数; 36 //而Ext可以将同一个事件依次绑定到多个事件处理句柄上; 37   Ext.onReady(function(){ 38     var test = Ext.get('test'); 39     //Ext.get('test'):获得HTML中id="test"对应的按钮; 40     test.on('click',function(){ 41       alert("handle1"); 42     }); 43     test.on('click',function(){ 44       alert("handle2"); 45     }); 46   }); 47  48 2.3.3 Ext.EventObjectImpl 49 //Ext.EventObjectImpl是对事件的封装,将Ext自定义事件和浏览器事件结合在一起使用; 50 //它封装不同浏览器的事件处理函数,为上层组件提供了统一的功能接口; 51   >1.getX()/getY()/getXY():获得发生的事件在页面中的坐标位置; 52   >2.getTarget():返回事件的目标元素; 53   >3.on()/un():事件的绑定与清除; 54   >4.purgeElement():把元素上的所有事件都清除; 55   >5.PReventDefault():取消浏览器对当前事件所执行的默认操作; 56   >6.stopPropagation():停止事件传递;(阻止冒泡); 57   >7.stopEvent():停止一个事件;(内部调用preventDefault()和stopPropagation()两个函数,取消浏览器的默认操作,同时停止事件传递); 58   >8.getRelatedTarget():返回与当前事件相关的元素; 59   >9.getWheelDelta():获取鼠标滚轮的delta值; 60   Ext.get('test').on('keypress',function(e){ 61     //监听函数的参数e就是一个Ext.EventObjectImpl 62     if(e.charCode == Ext.EventObjectImpl.SPACE){ 63       Ext.Msg.alert('info','空格'); 64     } 65   }); 66  67 2.3.4 Ext.util.Observable 68 //位于Ext组件的顶端,为Ext组件提供处理事件最基本的功能; 69 //实现一个可以处理事件的Ext组件,最直接的方法就是继承Ext.util.Observable; 70   >1.复合式参数 71   Ext.get('test').on('click',fn,this,{ 72     //click:事件名称;   fn:click事件触发时执行的函数;   this:fn执行时的作用域是this; 73     single:true,  //表示这个事件处理函数仅执行一次; 74     delay:100,    //延迟100ms后执行; 75     testId:4, 76     buffer:1000   //延迟执行,但会创建一个Ext.util.DelayTask对象;并把fn放入其中等待执行;若再次触发事件,则上一个fn会被取消,执行新的fn;这样保证fn不会重复执行多次; 77   }); 78   var fn = function(e,el,args){ 79     alert('handlel'); 80     alert(args.testId); 81     //在事件监听函数中获得在符合函数参数中定义的数据; 82   } 83   >2.一次性定义多个事件监听器 84   Ext.get('test').on({ 85     'click':{fn:fn}, 86     'mouSEOver':{ 87       fn:fn, 88       single:true, 89       delay:100 90     } 91   }); 92   >3.captrue()拦截函数 93   Ext.get('capture1').on('click',function(){ 94     Ext.util.Observable.capture(person,function(){ 95       alert('capture1'); 96       return true;        //不会终止事件的发生; 97       //return false;     //终止事件; 98     }); 99   })100   //通过控制capture()中处理函数的返回值来决定是继续执行某个事件的监听函数,还是直接终止;101   //可以为一个对象设置多个capture()拦截函数;形成处理链;102   >4.releaseCapture()103   //清除fireEvent()上所有的拦截函数;104   >5.suspendEvents()暂停函数105   Ext.get('test').on('click',function(){106     person.suspendEvents();107   })108   >6.resumeEvents()继续函数;109   Ext.get('test').on('click',function(){110     person.resumeEvents();111   })112 113 2.3.5 Ext.EventManager 事件管理器114 //定义了一系列与事件相关的处理函数;115   >1.Ext.onReady()116   //等页面文档渲染完毕但图片等还没下载时调用启动函数;117   Ext.onReady(function(){118     Ext.Msg.alert('message',Ext.get('test'));119     //页面渲染之后获取id="test"的Element对象;120   });121   >2.onWindowResize()122   //监听浏览器窗口大小变化;123   Ext.EventManager.onWindowResize(function(width,height){124     alert('width:'+width+'height:'+height);125   });

1 2.4 小结2 Ext基本功能架构,包括对象模型/组件模型和事件模型;Ext中所有的功能都建立在这些基本架构之上;