2.1 EXT的事件和类
2.11自定义事件
Ext.onReady(function(){
Person = function(name) {
this.name = name;
this.addEvents("walk", "eat", "sleep");// Person类自定义事件
}
Ext.extend(Person, Ext.util.Observable, {
info: function(event) {
return this.name + ' is ' + event + 'ing.';
}
});// Person继承Ext.util.Observable类
//通过on添加事件监听器
var person = new Person('Lingo');
person.on('walk', function() {
Ext.Msg.alert('event', person.name + "在走啊走啊。");
//alert(person.info('walk'));
});
person.on('eat', function(breakfast, lunch, supper) {
Ext.Msg.alert('event', person.name + "要吃" + breakfast + "," + lunch + "和" + supper + "。");
});
person.on('sleep', function(time) {
Ext.Msg.alert('event', person.name + "从" + time.format("H") + "点开始睡觉啦。");
});
//触发person的事件
Ext.get('walk').on('click', function() {
person.fireEvent('walk');//通过调用fireEvent触发事件,传入一个事件名
});//称作为参数,该事件对应的监听函数就会执行。
Ext.get('eat').on('click', function() {
person.fireEvent('eat', '早餐', '中餐', '晚餐');
});
Ext.get('sleep').on('click', function() {
person.fireEvent('sleep', new Date());
});
});
EXT中遵循一种树状的事件模型,所有继承自Ext.util.Observable类的控件都可以支持事件。可以为这些继承了Ext.util.Observable的对象定义一些事件,然后为这些时间配置监听器。当某个事件被触发时,EXT会自动调用对应的监听器,这这些就是EXT的事件模型。
这里的on是addListener()的简写形式。第一个参数传递事件名称,第二个参数是事件发生时执行的函数。
2.1.2浏览器事件
浏览器事件即传统意义上的鼠标单击、移动等事件,这些事件是由浏览器根据用户的动作触发的,与页面元素紧密相关。Ext使用Ext.EventManager、Ext.EventObject和Ext.lib.Event对原生浏览器事件进行封装,最后展现给我们的是一套统一的跨浏览器的通用事件接口。
Ext.get(‘test’) = document.getElementById(‘test’)
2.1.3 Ext.lib.Event
是定义在adapter中的工具类,它封装了不通浏览器的时间处理函数,为上层组件提供了统一的功能接口。
2.1.4 Ext.util.Observable
在Ext的事件模型体系中有举足轻重的地位,位于组件的顶端,为EXT组件提供了处理事件的最基本功能。如果要实现一个可以处理事件的EXT组件,最直接的方法就是继承Ext.util.Observable。
2.1.5 Ext.EventManager
作为事件管理器,它定义了一系列事件相关的处理函数,其中最常用的当属onDocumentReady(Ext.onReady())、onWinowResize和onTextResize。
2.1.6 Ext.EventObject
是对事件的封装,它将Ext自定义实际和浏览器事件结合在一起使用。
2.2 EXT的核心组件
2.2.1 Ext.Component
是EXT种所以组件的基类,它的所有子类都自动享有了标准EXT组件的生命周期,包括创建、渲染和销毁。它们也自动支持了标准的隐藏/显示以及启用/禁用等操作。
组件大致可以分成3大类:基本组件、工具组件和表单组件。
2.2.2 Ext.BoxComponent
也是一个比较重要的基础类,它直接继承自Ext.Component,并实现了定位和控制自身大小的功能。如果你需要制作一个可控制大小和位置的组件,就可以直接从Ext.BoxComponent继承。
2.2.3 Ext.container
继承自Ext.BoxComponent,它提供了两个重要的参数:layout和items。Layout参数指定当前组件使用何种布局,items参数中包含的是当前组件中的所有子组件。如果你想制作一个可以对自身包含的子组件进行布局的组件,那么就需要继承Ext.Container,它是一切布局组件的超类。
2.2.4 Ext.panel
Ext.Panel是EXT种经常用到的一个组件,它直接继承自Ext.container。与上面那些组件不通的是,Ext.Panel无需继承就可以直接使用。它是一个相当完美的标准组件。
2.2.5 Ext.TapPanel
是另一个常用的组件,很流行的一种风格。
分享到:
相关推荐
EXT dojochina Ext类...综上所述,EXT dojochina Ext类静态方法的主题涵盖了EXT框架中类和静态方法的核心概念,以及它们在实际开发中的应用。学习和熟练掌握这些知识点,将有助于提升你在EXT开发中的效率和代码质量。
EXT dojochina Ext事件是JavaScript库EXT JS中的一个重要概念,EXT JS是一个强大的前端开发框架,主要用于构建桌面级Web应用程序。这个压缩包可能包含了关于EXT JS事件处理的详细资料,特别是针对中国开发者...
EXT dojochina Ext类实例属性是一个关于EXT框架在JavaScript中的使用的主题,主要涉及EXT库中的类和实例属性。EXT是一个强大的JavaScript库,用于构建富客户端应用程序,它提供了丰富的组件和布局管理,使得Web应用...
花费半年心血研究解读总结。包含了Ext的核心类解析,Ext对象原理,Ext事件模型,Ext布局模型,AJAX原理,Ext数据模型的本质原理;UML图例详解。
**Ext.lib.Event** 是一个工具类,封装于 **adapter** 层,旨在提供一个统一的接口来处理不同浏览器中的事件。这一工具类使得开发人员无需关注浏览器之间的差异,能够更加专注于业务逻辑的编写。 ##### 主要函数...
除了构造方法,Ext类还涉及其他重要概念,如配置对象(config object)、混入(mixins)和静态方法(statics)。配置对象允许我们在创建组件实例时传递配置,如大小、样式等。混入可以将一组方法或属性添加到多个类...
1、Ext类 ………………………………… 2 2、Array类 …………………………… 4 3、Number类 …………………………… 4 4、String类 …………………………… 4 5、Date类 ……………………………… 5 6、Function类 ...
5. **抽象类和接口**:EXTJS也支持抽象类和接口的概念。抽象类是不能直接实例化的,它们通常作为基类,用于定义一组必须被子类实现的方法。接口则定义了一组必须被实现的签名,但不提供具体实现。 6. **构造函数**...
1. Ext3.2中文API.CHM:这是EXT JS 3.2版本的中文API文档,涵盖了EXT JS 3.2的所有类、方法、属性和事件,方便开发者快速查找和理解EXT JS的各种功能。 2. Ext2.2API中文版(最终完成版).CHM:此文档为EXT JS 2.2...
EXT3.jar的使用,意味着开发者可以在Java环境中直接调用EXT的相关类和方法,实现客户端的动态渲染。这种服务器端集成的方式,减少了前端与后端的通信负担,提高了应用的整体性能。在实际项目中,开发者可以通过Maven...
逻辑结构是指类和对象的组织方式,而目录结构则是指源代码在硬盘上的文件和目录布局。在Ext框架中,源码通常按照模块进行划分,比如`ext-all.js`包含了所有组件和功能,而`ext-base.js`则包含框架的基础部分。此外,...
API文档(http://extjs.com/deploy/ext-3.0-rc1/docs/)是了解和学习Ext3.0的关键资源,包含了所有类、方法、属性和事件的详细说明。 `ext-core-debug.js`和`ext-core.js`是Ext JS的核心库文件。`ext-core-debug.js...
EXT提供了大量的类和方法,掌握它们将使你能够灵活地构建应用。例如,了解Store类用于管理数据,Model类定义数据结构,Proxy类处理数据的获取和存储。 6. **EXT Designer**:EXT还提供了设计工具EXT Designer,可...
通过理解`ext事件模型`的组件与工作原理,开发者能够更好地控制页面元素的行为,并创建出更加丰富和响应式的用户界面。 #### 二、Ext.lib.Event详解 `Ext.lib.Event`是`ext事件模型`中的一个重要组成部分,它主要...
在“Extjs源码之--Ext事件机制/继承关系”中,我们将深入探讨EXTJS如何处理事件以及其类层次结构。EXTJS的事件处理主要由EventManager.js这个文件负责,它是EXTJS事件系统的基础。 首先,EXTJS的事件机制基于观察者...
这个API文档(EXT_API.chm)提供了Ext JS框架所有类、方法、属性和事件的详细说明。CHM格式是一种帮助文件格式,便于用户离线查阅。通过这个API,开发者可以了解到如何使用Ext JS构建富客户端应用程序,包括创建组件...
Element类是EXT处理DOM的基础,提供了选择、操作、样式设置、事件绑定等功能。通过Element,开发者可以方便地进行DOM元素的查找和操作。 4. 获取多个DOM的节点: EXT 提供了多种选择DOM元素的方法,如`Ext.select...
Ext.js 3.0的中文API提供了一个详细的类和方法参考,方便中文阅读者理解其工作原理。API文档通常包括以下内容: 1. **类结构**:列出所有可用的类,如Panel、Grid、Form等,以及它们之间的继承关系。 2. **类方法和...
在`EXT核心API详解(三)-Ext.Element.txt`中,你将了解到如何选择元素、添加和移除CSS类、处理事件、动画效果以及布局调整。 2. **Array, Date, Function, Number, String**: 在`EXT核心API详解(二)-Array Date ...
在EXT的配置中,我们需要了解其核心概念,如布局管理、组件系统、数据绑定以及事件处理机制。 EXT的配置涉及到多个方面,如主题设置、模块加载、路由配置等。主题设置允许开发者自定义应用的外观和风格,而模块加载...