EXT的核心组件,相关的处理事件和类的使用

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: exts-core-components-handling-events-and-classes-related-to-the-use-of.html’,scripts: true},
closable: true
});

arthinking wechat
欢迎关注itzhai公众号