首页 > 代码库 > 深入浅出ExtJS(第三版) Ext框架基础
深入浅出ExtJS(第三版) Ext框架基础
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.EventObjectImpl145 //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.EventObjectImpl158 if(e.charCode == Ext.EventObjectImpl.SPACE){159 Ext.Msg.alert(‘info‘,‘空格‘);160 }161 });
深入浅出ExtJS(第三版) Ext框架基础
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。