`

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概述与框架基础

    web开发前端的EXTJS框架详情,内容很详细。ppt文件

    深入浅出Ext JS(第2版).part1.rar

    内容简介 《深入浅出ExtJS》是ExtJS领域内的经典...第2章EXT框架基础 第3章表格控件 第4章表单与输入控件 第5章树形结构 第6章拖放 第7章弹出窗口 第8章布局 第9章工具栏和菜单 第10章数据存储与传输 第11章实用工具

    ExtJs框架简介_有案例

    Ext JS开发框架简介 框架简介、环境搭建、helloWord示例 EXT框架基础 EXT核心组件应用

    深入浅出ExtJS PDF 扫描版

    第2章 EXT框架基础 第3章 表格控件 第4章 表单与输入控件 第5章 树形结构 第6章 拖放 第7章 弹出窗口 第8章 布局 第9章 工具栏和菜单 第10章 数据存储与传输 第11章 实用工具 第12章 一个完整的EXT应用 第13章 通过...

    深入浅出ExtJS学习PDF 文档下载

    第2章 EXT框架基础 第3章 表格控件 第4章 表单与输入控件 第5章 树形结构 第6章 拖放 第7章 弹出窗口 第8章 布局 第9章 工具栏和菜单 第10章 数据存储与传输 第11章 实用工具 第12章 一个完整的EXT应用 第13章 通过...

    ext基础教程与框架源码分析

    本资源包含5个ext的基础教程,保证初学者能轻松看懂以及迅速掌握ext的编写方法

    Ext4 MVC 框架设计

    该程序采用Ext4 MVC技术搭建的一个页面平台,读者可在本程序基础上添加逻辑操作。

    深入浅出EXT JS 第二版

    深入浅出Extjs第二版 带书签 高清版 第1章 EXT概述 第2章 EXT框架基础 。。。

    EXT初级简明教程 PDF

    EXT比较初级的简明教程PDF格式,和以前的一本简明教程内容不一样。本教程同样面向入门级,为学习EXT打前战,内容主要有EXT框架基础及核心简介、EXT使用面板、EXT窗口及对话框、层和布局、表格控件、数据存储等。

    深入浅出Ext JS(第2版).part3.rar

    目录 第1章EXT概述 第2章EXT框架基础 第3章表格控件 第4章表单与输入控件 第5章树形结构 第6章拖放 第7章弹出窗口 第8章布局 第9章工具栏和菜单 第10章数据存储与传输 第11章实用工具

    深入浅出ExtJS第2版

    第2章 EXT框架基础 11 2.1 EXT的事件和类 11 2.1.1 自定义事件 11 2.1.2 浏览器事件 13 2.1.3 Ext.lib.Event 13 2.1.4 Ext.util.Observable 14 2.1.5 Ext.EventManager 17 2.1.6 Ext.EventObject 19 2.2 ...

    深入浅出Ext JS

    第2章 EXT框架基础 11 第3章 表格控件 28 第4章 表单与输入控件 76 第5章 树形结构 116 第6章 拖放 143 第7章 弹出窗口 159 第8章 布局 177 第9章 工具栏和菜单 211 第10章 数据存储与传输 230 第11章 ...

    深入浅出EXT JS 源码----下载不扣分,回帖加1分,欢迎下载,童叟无欺

    深入浅出EXT JS 书中源码 ...2 EXT框架基础 3 表格空间 4 表单输入空间 5 树形结构 6 拖放 7 弹出窗口 8 布局 9 工具栏和菜单 10 数据存储和传输 11 使用工具 12 一个完整的EXT应用 13 通过Ext Framework合理的应用EXT

    深入浅出Ext JS(第2版).part2.rar

    目录 第1章EXT概述 第2章EXT框架基础 第3章表格控件 第4章表单与输入控件 第5章树形结构 第6章拖放 第7章弹出窗口 第8章布局 第9章工具栏和菜单 第10章数据存储与传输 第11章实用工具

    深入浅出Ext JS(第2版).part4.rar

    目录 第1章EXT概述 第2章EXT框架基础 第3章表格控件 第4章表单与输入控件 第5章树形结构 第6章拖放 第7章弹出窗口 第8章布局 第9章工具栏和菜单 第10章数据存储与传输 第11章实用工具

    EXT的公司内部管理系统框架

    基础的功能都有了 完成的模块在系统设置大类中 实现了以下功能: 布局,动态树,动态菜单,grid,新增,编辑,删除,openflashchart的报表控件 文件批量上传,excel的上传解析,下载,comboboxTree,选择泡泡等 基本...

    java毕业设计,ssh+ext例子

    SSH框架+Ext技术做前台显示的客户关系管理系统 营销管理:客户开发计划、销售机会管理 二、客户管理:客户信息管理、客户流失管理 三、服务管理:服务创建、服务分配、服务反馈、服务归档 四、统计报表:客户服务...

    ExtJs2.0简明教程

    …6 第二章 Ext框架基础及核心简介………………………………………………………………………………….……8 2.1 Ext类库简介…………………………………………………………………………………………………....

    Ext江湖(完整+书签).part1

    本书以幽默诙谐的语言由浅入深地解析了Ext框架的方方面面,包括JS基础、Ext的DOM和CSS封装、内置对象的扩展、事件系统、Ajax和Direct、数据和缓存架构、面向对象和继承、UI组件、布局管理、模板、特效、图表和报表、...

    extjs实用开发指南

    extjs 实用开发指南 ext框架基础、和核心 使用面板 窗口及对话框 布局 表格控件 数据存储 TreePanel

Global site tag (gtag.js) - Google Analytics