深入浅出ExtJS(第三版) Ext框架基础

浏览数：37 / 时间：2015年06月09日

  1 1.准备工作
  2   >.深入浅出Ext JS(第3版)
  3   >.随书代码(图灵社区)
  4   >.ExtJS 4.1.1a
  5 
  6 第2章 Ext框架基础
  7 2.1 面向对象的基础架构
  8 2.1.1 创建类
  9   >.定义一个类:
 10   Ext.define(‘demo.Demo‘,{
 11     name:‘Lingo‘,
 12     hello:function () {
 13       return ‘Hello‘+this.name;
 14     }
 15   });
 16   //第一个参数是字符串类型的类名;
 17   //第二个参数是object类型,其中可以填写这个类型的字段和函数;
 18   >.创建一个对象:
 19   var demo = new demo.Demo();
 20 
 21 2.1.2 对象继承(extend)
 22   Ext.define(‘demo.DemoWindow‘,{
 23     extend:‘Ext.Window‘,        //继承Ext.Window的所有功能;
 24     title:‘demo title‘,         //扩展(设置标题);
 25     initComponent:function(){   //初始化时默认添加两个子组件;
 26       Ext.apply(this,{          //apply()将一批属性批量复制给当前对象;
 27         items:[{html:‘panel1‘},{html:‘panel2‘}]
 28       });
 29       this.callParent();        //callParent()函数实现对父类函数的快捷调用;
 30     }
 31   });
 32 
 33 2.1.3 多重继承(mixin)
 34   Ext.define(‘demo.DemoPanel‘,{
 35     extend:‘Ext.Window‘,        //单根继承
 36     mixins:[‘demo.Demo‘]        //混入(多重继承);将类‘demo.Demo‘的属性都复制给新类;
 37   });
 38 
 39 2.1.4 自动生成代码
 40   Ext.define(‘demo.DemoObject‘,{
 41     statices:{ TYPE_DEFAULT : 0 },  //设置静态成员,无须创建对象即可直接调用的属性或函数;
 42     constructor: function() {       //在创建对象时执行初始化的构造函数;
 43       //do some init;
 44     }
 45   })
 46 
 47 2.2 统一的组件模型
 48 2.2.1 Ext.Component
 49 //所有Ext组件的基类,组件下所有的子类都可能参与自动化Ext组件的生命周期,执行创建/渲染和销毁;
 50   var box = new Ext.Component({
 51     el: ‘test‘,
 52     style: ‘background-color:red; position:absoulte‘,
 53     pageX: 100,
 54     pageY: 50,,
 55     width: 200,
 56     height: 150 
 57   });
 58   box.render();
 59 
 60 2.2.2 Ext.Panel
 61 //Ext.Panel继承自Ext.Container;也可无须继承即可直接使用;
 62   var panel = new Ext.Panel({
 63     el:‘test‘,
 64     title:‘测试标题‘,
 65     floating:true,
 66     shadow:true,
 67     draggable:true,
 68     collapsible:true,
 69     html:‘测试内容‘,
 70     pageX:100,
 71     pageY:50,
 72     width:200,
 73     height:150
 74   });
 75   panel.render();
 76 
 77 2.2.3 Ext.Container
 78 //继承自Ext.Component;所有可布局组件的超类;
 79 //参数layout:指定当前组件使用何种布局;
 80 //参数items:包含的是当前组件中所有子组件;
 81   new Ext.Viewport({
 82     layout:‘border‘,
 83     items:[{
 84       xtype:‘panel‘
 85       region:‘north‘
 86     },{
 87       region:‘south‘
 88     },{
 89       region:‘west‘
 90     },{
 91       region:‘east‘
 92     },{
 93       region:‘center‘
 94     }]
 95   });
 96 
 97 2.3 完善的事件机制
 98 2.3.1 自定义事件
 99 //所有继承自Ext.util.Observable类的控件都可以支持事件;
100 //为这些类的对象定义一些事件,为事件配置监听器;
101 //当某个事件被触发,Ext会自动调用对应的监听器,这就是Ext事件模型;
102   >1.Person类
103   Person = function(name){    
104     this.name = name;
105     this.addEvents("walk","eat","sleep");   
106     //初始化时调用addEvents()定义了3个事件;
107   }
108   Ext.extend(Person,Ext.util.Observable,{   
109     //Person继承Observable所有属性;
110     info:function(){          
111       return this.name+"is"+event+"ing.";
112     }
113   });
114   >2.为person添加事件监听器
115   var person = new Person(‘Lingo‘);
116   person.on(‘walk‘,function(){
117     //on()是addListener()的简写形式;
118     //参数一:传递事件名称;
119     //参数二:事件发生时执行的函数;
120     Ext.Msg.alert(‘event‘,person.name+"在走啊走.")
121   });
122   >3.触发person的事件
123   Ext.get(‘walk‘).on(‘click‘,function(){      
124   //给walk按钮绑定点击事件;
125     person.fireEvent(‘walk‘);         
126     //fireEvent()传入一个事件名称作为参数,该事件对应的监听函数就会执行;
127   });
128 
129 2.3.2 浏览器事件
130 //Ext使用Ext.EventManager/Ext.EventObject/Ext.libEvent对原生浏览器事件进行封装;
131 //原生事件处理是通过单一的绑定实现的,但每次只能给一个事件绑定一个事件处理函数;
132 //而Ext可以将同一个事件依次绑定到多个事件处理句柄上;
133   Ext.onReady(function(){
134     var test = Ext.get(‘test‘);
135     //Ext.get(‘test‘):获得HTML中id="test"对应的按钮;
136     test.on(‘click‘,function(){
137       alert("handle1");
138     });
139     test.on(‘click‘,function(){
140       alert("handle2");
141     });
142   });
143 
144 2.3.3 Ext.EventObjectImpl
145 //Ext.EventObjectImpl是对事件的封装,将Ext自定义事件和浏览器事件结合在一起使用;
146 //它封装不同浏览器的事件处理函数,为上层组件提供了统一的功能接口;
147   >1.getX()/getY()/getXY():获得发生的事件在页面中的坐标位置;
148   >2.getTarget():返回事件的目标元素;
149   >3.on()/un():事件的绑定与清除;
150   >4.purgeElement():把元素上的所有事件都清除;
151   >5.preventDefault():取消浏览器对当前事件所执行的默认操作;
152   >6.stopPropagation():停止事件传递;(阻止冒泡);
153   >7.stopEvent():停止一个事件;(内部调用preventDefault()和stopPropagation()两个函数,取消浏览器的默认操作,同时停止事件传递);
154   >8.getRelatedTarget():返回与当前事件相关的元素;
155   >9.getWheelDelta():获取鼠标滚轮的delta值;
156   Ext.get(‘test‘).on(‘keypress‘,function(e){
157     //监听函数的参数e就是一个Ext.EventObjectImpl
158     if(e.charCode == Ext.EventObjectImpl.SPACE){
159       Ext.Msg.alert(‘info‘,‘空格‘);
160     }
161   });