EXT的核心组件,相关的处理事件和类的使用
本文由发表于6年前 | Javascript | 暂无评论 |  被围观 7,938 views+

EXT中的事件,可分为如下两种事件:自定义事件和浏览器事件:

自定义事件:

EXT中的自定义事件通常是继承Ext.util.Observable类来实现。可以为继承了Ext.util.Observable的对象定义一些事件。

具体使用方法如下

创建一个Student类,包含一个属性name,使用this.addEvents()添加2个事件

Student = function(name){
	this.name = name;
	this.addEvents("read","write");
}

使用Ext.extend让Student继承Ext.util.Observable,添加一个函数info()

Ext.extend(Student, Ext.util.Observable,{
	info: function(event){
		return this.name + ' is ' + event + 'ing.';
	}
});

创建一个Student对象on既addListener()的简写,这里使用on为read事件添加一个执行函数

var student = new Student('Jason');
student.on('read', function(){
	Ext.Msg.alert('event', student.name + " is reading");
});
student.on('write', function(homework){
	Ext.Msg.alert('event', student.name + " is writing " + homework);
});

调用fireEvent()触发事件,read为触发的事件名称,可以为该事件传入一个参数“English”

Ext.get('read').on('click', function(){
	student.fireEvent('read');
});
Ext.get('write').on('click', function(){
	student.fireEvent('write', 'English');
});

如果想要 删除事件对应的监听函数,则应该显示创建该函数:
un相当于removeListener,用于删除事件对应的监听函数

var fn = function(){}
student.on('read', fn);
student.un('read', fn);

如果想要删除所有监听器,可以使用

purgeListeners();
浏览器事件

浏览器事件是浏览器根据用户的动作触发的,相关的类包括:

Ext.EventManager
Ext.EventObject
Ext.lib.Event

为HTML元素定义浏览器事件,可以同时定义多个,他们之间会依次执行。


Ext.lib.Event

定义在adapter中的工具类,重要定义了以下几个主要的函数:

getX() getY() getXY
getTarget()
on() un()
preventDefault()
stopPropagation()
stopEvent()
onAvailable()
resolveTextNode()
getRelateTarget()


Ext.util.Observable

要实现一个可处理事件的EXT组件时,可以直接继承Ext.util.Observable

大括号表示复合式参数,如果把下面的single换成buffer,则会以等待执行队列的机制去执行, 重新触发时取消当前事件,保证函数不会重复执行,para1表示传入fn函数的参数,fn函数使用args.参数名去接受

Ext.get('button1').on('click', fn, this, {
	single: true,
	delay: 10,
	para1: 1
});
var fn = function(e,el,args){
	alert(args.para1);
};

使用on()一次定义多个事件监听器

Ext.get('test').on({
	'click':{
		fn:fn,
		single:true
	},
	'moouseover':{
		fn:fn,
		single:true,
		delay:100
	}
});

使用capture和releaseCapture设置事件拦截器
return true:表示拦截处理后会继续执行接下来的事件
return false:表示拦截处理后会终止事件的发生

Ext.get('button2').on('click', function(){
	Ext.util.Observable.capture(student, function(){
		alert('capture');
		return false;
	});
});

releaseCapture::一次性清楚fireEvent上的所有拦截函数
suspendEvents():一次设置来暂停某个对象中所有事件的发生
resumeEvents():取消暂停

Ext.EventManager

Ext.EventManager,定义了一系列事件相关的处理函数,常用的包括:
onDocumentReady, onWindowResize, onTextResize

Ext.onReady():使用它确保脚本是在HTML元素都加载完成后才执行,可以避免很多潜在的问题。

onWindowResize():监听浏览器窗口的大小改变
包含两个参数,宽度和高度
这个函数不用写在Ext.onReady中

Ext.EventManager.onWindowResize(function(width,height){
	alert("change the size");
});

Ext.EventObject
事件的封装类,将EXT自定义事件和浏览器事件结合在一起使用

Ext.get(document.body).on('mousewheel',function(e){
	var data = e.getWheelDelta();
	var text = Ext.get('text1');
	var width = text.getWidth();
	text.setWidth(width + data, true);
});
EXT的核心组件


Ext.Component

全体Ext组件的基类。Component下所有的子类均按照统一的Ext组件生命周期(lifeycle)执行运作, 即创建、渲染和销毁(creation、rendering和destruction),并具有隐藏/显示、启用/禁用的基本行为特性。Component下的子类可被延时渲染(lazy-rendered)成为Ext.Container的一种,同时自动登记到Ext.ComponentMgr,这样便可在后面的代码使用ExtgetCmp获取组件的引用。当需要以盒子模型(box model)的模式管理这些可视的器件(widgets),这些器件就必须从Component(或Ext.BoxComponent)继承。


Ext.BoxComponent

直接继承Ext.Component,实现了定位和控制自身大小的功能,如果需要制作一个可以控制大小和位置的组件,可以直接继承它

var box = new Ext.BoxComponent({
	el: 'box1',
	style: 'background-color:blue',
	pageX: 100,
	pageY: 100,
	width: 200,
	height: 150
});
box.render();


Ext.Container

继承自Ext.BoxComponent,包含重要的参数:layout和items

Ext.BoxComponent的子类,用于承载其它任何组件,容器负责一些基础性的行为,也就是装载子项、添加、插入和移除子项。根据容纳子项的不同,所产生的可视效果,需委托任意布局类layout中的一种来指点特定的布局逻辑(layout logic)。此类被于继承而且一般情况下不应通过关键字new来直接实例化。


Ext.Panel

直接继承自Ext.Container,与上级组件不同,可以直接使用
一个比较完美的标准组件

var panel = new Ext.Panel({
	el: 'panel1',
	title: 'panel标题',
	floating: true,
	draggable: true,
	shadow: true,
	collapsible: true,
	html: '这是html测试内容',
	pageX: 100,
	pageY: 100,
	width: 100,
	height: 100
});
panel.render();


Ext.TabPanel

选项卡面板

var tabs = new Ext.TabPanel({
	renderTo: document.body,
	height:200
});
tabs.add({
	title: 'tab1',
	html:'tab1'
});
tabs.add({
	id: Ext.id(),
	title: 'tab2',
	html: 'tab2',
	closable:true
});
tabs.activate(0);

添加一个tab

var grid = new Ext.grid.GridPanel({
    store: new Ext.data.SimpleStore({
        fields: ['id','music'],
        data: [
            ['1','music1'],
            ['2','music2']
        ]
    }),
    columns: [
        {header:'曲目',dataIndex:'id'},
        {header:'歌曲名称',dataIndex:'music'}
    ]
});
var tab = tabs.add({
	title: '表格' + id,
	closable: true,
 	layout: 'fit',
 	items: [grid]
});
tabs.activate(tab);

TabPanel中加载后台数据

tabs.add({
	title:'加载数据',
	autoLoad: {url: 'test.html',scripts: true},
	closable: true
});
除了文章中有特别说明,均为IT宅原创文章,转载请以链接形式注明出处。
本文链接:http://www.itzhai.com/exts-core-components-handling-events-and-classes-related-to-the-use-of.html
arthinking Java技术交流群:280755654,入门群:428693174 more
分享到:
 
2011 7/24
文章评论
    没有评论
给我留言

有人回复时邮件通知我
Javascript的相关文章
随机文章 本月热门 热评
1 Struts2笔记 – Struts2中访问Web元素的3中方法 2011/6/19
2 使用TFTP备份还原交换机中的配置文件 2011/4/15
3 Java基础笔记 – Java中的泛型使用详细介绍 2011/10/30
4 访问执行速度过慢分析之MySQL慢语句分析 2014/11/12
5 来自《Effective Java》的57条程序设计建议 2012/9/24
6 为什么API文档如此重要 2013/1/12
友情推荐 更多
破博客 文官洗碗安天下,武将打怪定乾坤。多么美好的年代,思之令人泪落。
Mr.5's Life 白天是一名程序员,晚上就是个有抱负的探索者
行知-追寻技术之美 关注大数据,分布式系统
我爱编程 编程成长轨迹
Cynthia's Blog 学习笔记 知识总结 思考感悟
 
欢迎关注我的公众号 IT宅
关于IT宅 文章归档

IT宅中的文章除了标题注明转载或有特别说明的文章,均为IT宅的技术知识总结,学习笔记或随笔。如果喜欢,请使用文章下面提供的分享组件。转载请注明出处并加入文章的原链接。 感谢大家的支持。

联系我们:admin@itzhai.com

Theme by arthinking. Copyright © 2011-2015 IT宅.com 保留所有权利.