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.Panel
15 //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:150
28 });
29 panel.render();
30
31 2.2.3 Ext.Container
32 //继承自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中所有的功能都建立在这些基本架构之上;
