`
jiaguwen123
  • 浏览: 413945 次
  • 性别: Icon_minigender_2
  • 来自: 深圳
社区版块
存档分类
最新评论

EXT的事件和类

    博客分类:
  • EXT
 
阅读更多
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类静态方法.rar

    EXT dojochina Ext类...综上所述,EXT dojochina Ext类静态方法的主题涵盖了EXT框架中类和静态方法的核心概念,以及它们在实际开发中的应用。学习和熟练掌握这些知识点,将有助于提升你在EXT开发中的效率和代码质量。

    EXT dojochina Ext事件.rar

    EXT dojochina Ext事件是JavaScript库EXT JS中的一个重要概念,EXT JS是一个强大的前端开发框架,主要用于构建桌面级Web应用程序。这个压缩包可能包含了关于EXT JS事件处理的详细资料,特别是针对中国开发者...

    EXT dojochina Ext类实例属性.rar

    EXT dojochina Ext类实例属性是一个关于EXT框架在JavaScript中的使用的主题,主要涉及EXT库中的类和实例属性。EXT是一个强大的JavaScript库,用于构建富客户端应用程序,它提供了丰富的组件和布局管理,使得Web应用...

    Ext 深入剖析,使用UML对Ext类关系解读

    花费半年心血研究解读总结。包含了Ext的核心类解析,Ext对象原理,Ext事件模型,Ext布局模型,AJAX原理,Ext数据模型的本质原理;UML图例详解。

    Ext_类的详细介绍

    **Ext.lib.Event** 是一个工具类,封装于 **adapter** 层,旨在提供一个统一的接口来处理不同浏览器中的事件。这一工具类使得开发人员无需关注浏览器之间的差异,能够更加专注于业务逻辑的编写。 ##### 主要函数...

    EXT dojochina Ext类构造方法.rar

    除了构造方法,Ext类还涉及其他重要概念,如配置对象(config object)、混入(mixins)和静态方法(statics)。配置对象允许我们在创建组件实例时传递配置,如大小、样式等。混入可以将一组方法或属性添加到多个类...

    EXT核心API详解

    1、Ext类 ………………………………… 2 2、Array类 …………………………… 4 3、Number类 …………………………… 4 4、String类 …………………………… 4 5、Date类 ……………………………… 5 6、Function类 ...

    EXT dojochina Ext类继承.rar

    5. **抽象类和接口**:EXTJS也支持抽象类和接口的概念。抽象类是不能直接实例化的,它们通常作为基类,用于定义一组必须被子类实现的方法。接口则定义了一组必须被实现的签名,但不提供具体实现。 6. **构造函数**...

    ext JS 源码和学习资料

    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 ext使用非常多

    EXT3.jar的使用,意味着开发者可以在Java环境中直接调用EXT的相关类和方法,实现客户端的动态渲染。这种服务器端集成的方式,减少了前端与后端的通信负担,提高了应用的整体性能。在实际项目中,开发者可以通过Maven...

    Ext框架结构 Ext目录结构

    逻辑结构是指类和对象的组织方式,而目录结构则是指源代码在硬盘上的文件和目录布局。在Ext框架中,源码通常按照模块进行划分,比如`ext-all.js`包含了所有组件和功能,而`ext-base.js`则包含框架的基础部分。此外,...

    Ext3.0和API文档

    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学习资料 20篇详细学习笔记 初学者ext学习的文档

    EXT提供了大量的类和方法,掌握它们将使你能够灵活地构建应用。例如,了解Store类用于管理数据,Model类定义数据结构,Proxy类处理数据的获取和存储。 6. **EXT Designer**:EXT还提供了设计工具EXT Designer,可...

    ext事件模型

    通过理解`ext事件模型`的组件与工作原理,开发者能够更好地控制页面元素的行为,并创建出更加丰富和响应式的用户界面。 #### 二、Ext.lib.Event详解 `Ext.lib.Event`是`ext事件模型`中的一个重要组成部分,它主要...

    Extjs源码之--Ext事件机制/继承关系

    在“Extjs源码之--Ext事件机制/继承关系”中,我们将深入探讨EXTJS如何处理事件以及其类层次结构。EXTJS的事件处理主要由EventManager.js这个文件负责,它是EXTJS事件系统的基础。 首先,EXTJS的事件机制基于观察者...

    Ext API和Ext教程

    这个API文档(EXT_API.chm)提供了Ext JS框架所有类、方法、属性和事件的详细说明。CHM格式是一种帮助文件格式,便于用户离线查阅。通过这个API,开发者可以了解到如何使用Ext JS构建富客户端应用程序,包括创建组件...

    Ext.js教程和Ext.js API

    Ext.js 3.0的中文API提供了一个详细的类和方法参考,方便中文阅读者理解其工作原理。API文档通常包括以下内容: 1. **类结构**:列出所有可用的类,如Panel、Grid、Form等,以及它们之间的继承关系。 2. **类方法和...

    Ext API详解--笔记

    在`EXT核心API详解(三)-Ext.Element.txt`中,你将了解到如何选择元素、添加和移除CSS类、处理事件、动画效果以及布局调整。 2. **Array, Date, Function, Number, String**: 在`EXT核心API详解(二)-Array Date ...

    ext 和jboss配置

    在EXT的配置中,我们需要了解其核心概念,如布局管理、组件系统、数据绑定以及事件处理机制。 EXT的配置涉及到多个方面,如主题设置、模块加载、路由配置等。主题设置允许开发者自定义应用的外观和风格,而模块加载...

    ext 3.0中文API

    EXT 3.0的API文档对于开发者来说是不可或缺的资源,它详细解释了各种类、方法、事件和配置选项,帮助开发者理解和使用EXT库构建复杂的Web应用。 EXT库的核心在于其组件模型,其中包括表格、面板、窗口、菜单、工具...

Global site tag (gtag.js) - Google Analytics