第二章 Ext框架基础
2.1自定义事件：
???Ext是树状事件模型，所有继承Ext.util.Observable类的控件都可以支持事件。可以为继承了Ext.util.Observable的对象定义一些事件，然后配置监听器。当事件触发，Ext会自动调用对应的监听器。这就是Ext的事件模型。
?
???on()是addListener()的简写，功能一样。第一参数：传递事件名称；第二个参数：事件发生时执行的函数。
?
???动态语言的特有特性：如果想给监听方法传递参数，直接把参数写到fireEvent()里就行。不用管参数数量和类型。不过，需要确保监听函数可以处理传递过去的参数。
?
???on是addListener的简写，removeListener的简写是un，可以删除某个事件对应的监听函数。
?
???purgeListeners()可以把所有的监听器都删除掉。（慎用）
?
?
2.1.2?浏览器事件
???Ext使用Ext.EventManager、Ext.EventObject和Ext.lib.Event对原生浏览器事件进行封装成一套统一的跨浏览器的通用事件接口。
?
???HTML元素对事件的处理是通过简单的单一绑定实现的。也就是说，如果不进行任何封装，事件只能绑定到一个事件处理句柄。使用Ext，同一个事件可以依次绑定到多个事件处理句柄上。
?
???Ext.get('id')获得HTML中id=‘id’的元素。
?
?
2.1.3?Ext.lib.Event
???Ext.lib.Event是定义在adapter中的工具栏，封装了不同浏览器的事件处理函数，为上层组件提供了统一的功能接口。
???Ext.lib.Event中定义的主要函数：
???getX()，getY()，getXY()获得发生事件在页面中的坐标位置；
???getTarget()返回事件的目标元素
???on()、un()绑定、解除事件监听函数。purgeElement()函数会把元素上的所有事件都清楚。？上面说的是purgeListeners()
???preventDefault()取消浏览器对当前事件所执行的默认操作。比如，在自定义右击菜单时可以防止单击鼠标右键时弹出浏览器自身的右键菜单。
???stopPropagation()停止事件传递。
???stopEvent()停止一个事件。内部调用了preventDefault()和stopPropagation()两个函数，取消了浏览器的默认操作；同时停止事件传递。
???onAvailable(id，fn，scope)等到id对应的HTML元素可用时执行fn这个函数，scope表示调用函数的作用域。（里面使用setInterval()循环检测id对应的HTML元素，直到它可用时才停止循环执行fn函数）
???resolveTextNode()如果参数node是一个文本节点，就返回上层节点；否则，返回node本身。（这个函数是getTarg()函数中使用的工具函数）
???getRelatedTarget()返回事件相关的HTML元素。
?
?
2.1.4?Ext.util.Observable
???实现一个可以处理事件的Ext组件最直接的方法就是继承Ext.util.Observable
???当addListener/on用于注册事件时，可以使用复合式参数。
???注意：buffer和delay都是延迟一段时间后执行对应的监听函数。但是buffer会创建一个Ext.util.DelayTask对象，并把fn放入其中等待执行。在等待过程中，如果再次触发事件，那么上次的任务就会取消，并把新的fn放入任务队列里。保证fn不会重复执行多次。
?
???使用on()可以一次定义多个事件监听器。
?
???Ext.util.Observable可以为某个事件设置拦截器，统一管理方法的触发。使用capture()和releaseCapture()来实现这个功能。
???可以通过capture()中处理函数的返回值来决定是继续执行某个事件的监听函数，还是直接中止该事件的发生。
???releaseCapture()一次性清除fireEvent()上所有的拦截函数。（不能准确清除某一个）
suspendEvents()暂停某个对象中所有事件的发生。再次调用resumeEvents()可以取消这个效果。
???暂停（suspendEvents）和继续（resumeEvents）可以帮助我们统一管理某一对象的事件。
?
?
2.1.5?Ext.EventManager
???Ext.EventManager定义了一系列事件相关的处理函数。常见的有onDocumentReady（即Ext.onReady()）、onWindowResize和onTextResize。
Ext.onReady()保证在所有的HTML元素都加载完成后才执行。无论何时，都这样做，可以避免很多潜在问题。
???onWindowResize()监听浏览器窗口的大小改变。Ext.EventManager.onWindowResize(function(width,?height){//代码});
???onTextResize()监听用户修改浏览器的文字大小。Ext.EventManager.onTextResize(function(oldSise,?newSize){//代码});注意：onTextResize()需要操作<body>向其中添加测试用的元素。所有必须在Ext.onReady()中执行，否则会出错。
?
?
2.1.6?Ext.EventObject
???Ext.EventObject将Ext自定义事件和浏览器事件结合在一起使用。还提供了辅助工具函数。
???Ext.EventObject定义了一系列功能键，处理按键事件时不用背ASCII码，直接使用就行了：Ext.EventObject.SPACE代表空格键。
?
???Ext.EventObject.browserEvent来得到原始的浏览器事件。还是建议使用Ext.EventObject。
Ext.EventObject与Ext.lib.Event中很多函数重名。Ext.EventObject代表浏览器事件，在内部使用Ext.lib.Event处理对应的browserEvent。
???Ext.EventObject对Ext.lib.Event扩展的部分是对鼠标事件和按键事件的增强，可以判断Alt等功能键是否被按下。也可以使用hasModifier()判断是否有功能键被按下。一般与其他按键状态配合，用于判断组合按键的情况。
???Ext.EventObject.getWheelDelta()，获得鼠标滚轮的delta值。
?
?
2.2?Ext的核心组件
?
2.2.1?Ext.Component
???Ext.Component是Ext所有组件的基类，所有的子类都自动享有了标准Ext组件的生命周期，包括创建、渲染和销毁。自动支持标准的隐藏/显示以及启用/禁用等操作。
每个组件都有一个xtype属性，指定在某处使用的组件。
???所有组件都允许在Ext.Container及其子类中进行延迟渲染（lazy?render），也可以把组件注册到Ext.ComponentMgr中，这样就可以在任何地方使用Ext.getCmp()函数直接根据id获得对应的组件。
（Ext组件继承树的图有机会再贴。今天网络有问题。）
组件大致分三类：基本组件、工具条组件和表单组件。
（Ext组件图有机会再贴。今天网络有问题。）
通常会在进行布局时借助xtype实现简化配置和延迟加载。
?
2.2.2?Ext.BoxComponent
???Ext.BoxComponent继承之Ext.Component，并实现了定位和控制自身大小的功能。
???可以使用pageX、pageY、x、y为Ext.BoxComponent指定具体的坐标，也使用width和height为Ext.BoxComponent指定长度和宽度，或者autoHeight和autoWidth让Ext.BoxComponent根据本身的内容自动调整长度和高度。例如new?Ext.BoxComponent(){pageX:100,pageY:50,……};
?
?
2.2.3?Ext.Container
???Ext.Container继承之Ext.BoxComponent，提供了参数layout，指定当前组件使用的布局；items包含当前组件中的所有子组件。
（图有机会再贴。今天网络有问题。）
2.2.4?Ext.Panel
???Ext.Panel直接继承自Ext.Container。无需继承即可直接使用。使用title定义标题；使用tbar和bbar设置上下位置的工具条；使用collapseFirst、collapsed、collapsedCls和collapsible设置与面板折叠相关的配置；还可以使用floating和shadow设置浮动阴影效果，以及使用HTML直接设置面板内容。例如：var?panel?=new?Ext.Panel({title:'测试',……});panel.render();
?
2.2.5?Ext.TabPanel
???var?tabs?=?new?Ext.TabPanel({renderTo:document.body,?height:100});第一个参数指定渲染的元素，然后直接放到HTML的body部分。
???tabs.add({id:Ext.id,?title:'测试标题',html:'内容',?closable:true});可以通过add()向TabPanel中添加两个标签。Ext.id生成唯一的id值；closable设置标签是否可以手工关闭。默认是false。
注：这里的html属性还可以使用autoLoad:{url:'html,?scripts:ture}文件'来代替。后一个参数指明html文件中有JavaScript。
??tabs.activate(0)激活标签，标签的索引从0开始。
?
更多内容请见：http://www.ivvy.org/