Extjs里的事件处理,只有继承了Ext.util.Observable类才具有事件功能
1.先看一个简单点的例子
//Extjs里的事件处理,只有继承了Ext.util.Observable类才具有事件功能
Employee = function(){
this.addEvents("test");//注册事件,该事件名字为:test
}
Ext.extend(Employee,Ext.util.Observable);
todo = function(){
alert("event was fired");
}
var em = new Employee();
em.on("test",todo);//将方法绑定到事件test上
em.fireEvent("test");//触发事件test
2.
页面代码:
<input type="button" name="button1" id="button1" value="button1" />
js代码:
todo = function(){
alert("event was fired");
}
//window.onload = function(){}等价于Ext.onReady(function(){});页面加载完后就执行该函数
Ext.onReady(function() {
//返回的button1是Observable的子类,所以具有事件处理功能
var button1 = Ext.get("button1");//返回的Element对象,不等价于document.getElementById("button1")
// var button1 = Ext.getDom("button1");//返回的HTMLElement对象,等价于document.getElementById("button1");
alert(button1.id);//button1
// button1.addListener("click",todo);//addListener与on是一样
// button1.addListener("mouseover",todo);
//通过EventManager来实现
Ext.EventManager.addListener(button1,"click",todo);
Ext.EventManager.addListener(button1,"mouseover",todo);
}
)
3.
todo = function(){
alert(this.id);//此处的this由addListener的第3个参数决定
}
Ext.onReady(function() {
//返回的button1是Observable的子类,所以具有事件处理功能
var button1 = Ext.get("button1");
//先打印出button1,再打印出ext-gen1,刚好与addListener添加的顺序相反
button1.addListener("click",todo,this);//todo函数打印出:ext-gen1
button1.addListener("click",todo,button1);//todo函数打印出:button1
}
)
4.
todo = function(){
alert(this.id);//此处的this由addListener的第3个参数决定
}
Ext.onReady(function(){
var button1 = Ext.get("button1");
//addListener的第4个参数是个配置选项,所以需要用{},有4个配置选项,delay(触发事件多久后执行指定的函数),scope(如果第3个参数设置了,此处可以省),single(事件触发一次后,就被移走,以后再触发该事件无效),buffer(缓存区,也就是多长时间内触发该事件大于1次都认为是1次)
//delay和buffer同时使用时有错误,具体原因还不知道是为什么?
button1.addListener("click",todo,button1,{delay:3000,single:false});//因为button1也属于Observable类的子类,所以查看文档时可以直接查看Observable中的addListener方法
}
)
5.
//window.onload = function(){}等价于Ext.onReady(function(){}); 页面加载完后就执行该函数
Ext.onReady(function(){
alert("ok1");
function AA(){
alert("ok2");
}
}
)
//只会打印出ok1,ok2不会被打印出来。因为页面加载完后会去执行函数function(),但是function()函数里的函数(或叫类)AA则不会去执行的。
Ext.onReady(function(){
alert("ok1");
function AA(){
alert("ok2");
}
new AA();
}
)
//这样ok1和ok2都会被打印出来,因为new AA()去调用了
6.等价写法:
todo = function(){
alert(this.id);//此处的this由addListener的第3个参数决定
}
Ext.onReady(function(){
var button1 = Ext.get("button1");
//第一种写法
// button1.addListener("click",todo,button1);
// button1.addListener("mouseover",todo,button1);
//第二种写法
// button1.on({click:todo,mouseover:todo,scope:button1});
//第三种写法
button1.on(
{
click:{scope:button1,delay:3000,fn:todo},
mouseover:{scope:button1,delay:1000,fn:todo}
}
);
}
)
7.
Ext.onReady(
function(){
alert("ok1");//ok1
AA = function(){
alert("ok2");//ok2
};
//同时定义多个属性和方法
AA.prototype = {
aa:1,
bb:2,
a:function(){
alert("aa");//因为没有调用,所以不会打印出来
},
b:function(){
alert("bb");//因为没有调用,所以不会打印出来
}
}
new AA();
}
)
8.事件处理EventObject
Ext.onReady(function(){
var win = new Ext.Window({
title:'hello',
html:'world',
width:400,
height:300
});
win.show();
//查看Extjs的文档:Ext.Window中的Public Events部分查看到:move : ( Ext.Component this, Number x, Number y ) ,默认3个参数,所以才有得下面函数的c,x,y
win.on("move",moving);
})
moving = function(c,x,y){
alert(c.id);
alert(x);
alert(y);
}
另一个例子:
页面代码:
<a href="http://www.baidu.com" id="baidu">百度</a>
js代码:
//事件处理EventObject
todo = function(e){//EventObject,在这里可以理解为:EventObject是HTMLElement对象的click事件的默认参数
alert(this.id);//baidu
var htmlEl = e.getTarget();//返回值是HTMLElement,得到事件触发的目标,这里也就是指<A>连接标签
alert(htmlEl.innerText);//打印出:"百度" (HTMLElement有innerHTML和innnerText方法。 Element没有)
e.stopEvent();//阻止事件继续发生,也就是<A>标签不会跳转到baidu页面了
//获得实际传递参数值
alert(arguments.length);//3
alert(arguments[2].aa);//test
alert(arguments[2]["aa"]);//test
}
Ext.onReady(
function(){
var baidu = Ext.get("baidu");
baidu.on("click",todo,baidu,{aa:'test'});
}
)
分享到:
相关推荐
extJS是一个很不错的Ajax框架,可以用来开发带有华丽外观的富客户端应用,使得我们的b/s应用更加具有活力及生命力。ExtJS是一个用javascript...本教程主要是针对ExtJS2.0进行介绍,全部代码、截图等都是基于ExtJS2.0。
ExtJs最开始基于YUI技术,由开发人员JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。
15)事件处理 16)Card布局 17)Pable布局及其它布局 18)工具栏Toolbar 19)选项面板TabPanel 20)基本表格GridPanel 21)视图区ViewPort 22)可编辑表格EditorGridPanel 23)窗口基本应用 24)窗口分组 25)对话框 26)与...
…….13 2.5 事件处理……………………………………………………………………………………………………………15 第三章 使用面板………………………………………………………………………………………………...
ExtJs最开始基于YUI技术,由开发人员Jack Slocum开发,通过参考Java Swing等机制来组织可视化组件,无论从UI界面上CSS样式的应用,到数据解析上的异常处理,都可算是一款不可多得的JavaScript客户端技术的精品。
就我个人的观点而言,在业务处理上讲ExtJS2.0已非常完备,足以满足绝大多数web表示层应用的需求;但是对于解释执行的javascript来讲性能损耗问题却始终无法避免,因此个人不建议在要求响应速度的项目中使用ExtJS进行...
ExtJS的类库由以下几部分组成: 底层API(core):底层API中提供了对DOM操作、查询的封装、事件处理、DOM查询器等基础的功能。其它控件都是建立在这些底层api的基础上,底层api位于源代码目录的core子目录中,包括...
v2.0(200900509) 提升初始化效率,修改宽度高度计算,setHeight,setWidth,setSize Ext-core已经自动减去 边框长度和padding 在窗体设置css 宽度,高度,高度重要,后面要更新,因为调节大小设的也是css高度宽度,...
-如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...
该框架提供了完整的Web应用解决方案,UI使用当前流行的ExtJS2.0,表现层框架为Struts2,事务管理由Spring2.0处理,持久层使用Ibatis2.3。该框架已经基于上述技术,提供了如页面框架、身份验证、用户管理和权限管理等...
-如何自定义Javascript脚本和C#处理函数来响应键盘事件。 -为Tree增加AutoLeafIdentification属性。 -增加示例(tree_auto_leaf_identification.aspx)(feedback:wdrabbit)。 +2009-11-17 v2.1.4 -修正...
Extjs在经过两年的发展,Ext JS从2.0版开始,越来越受用户欢迎,今年,Extjs不但推出3.0版本,而且还推出了Ext Core,准备在Web2.0网站开发中占一席之地,如在 Extjs2.x版本中为人所诟病的速度问题在ExtJs3.0中有所...
基于Extjs的开源控件库ExtAspNet英文版 v3.1.9,ExtAspNet - 基于 ExtJS 的专业 ASP.NET 2.0 控件库,拥有完善的 AJAX 支持和丰富的界面效果。ExtAspNet 是一组基于 ExtJS 的专业 ASP.NET 2.0 控件库,拥有完善的 ...
基于Extjs的开源控件库ExtAspNet中文版 v3.1.9,ExtAspNet - 基于 ExtJS 的专业 ASP.NET 2.0 控件库,拥有完善的 AJAX 支持和丰富的界面效果。ExtAspNet 是一组基于 ExtJS 的专业 ASP.NET 2.0 控件库,拥有完善的 ...
本产品基于 ExtJS, HtmlAgilityPack, Nii.JSON, YUICompressor 开源程序。 发布历史: +2009-08-02 v2.0 beta4 +和Asp.Net的Forms Authentication兼容(feedback:mgzhenhong)。(fixed) -采用和Asp.Net Ajax类似的...
3.1 偶的ExtJS讲座之基础教程PDF版3.2 很炫的图片循环效果(jquery改写版)3.3 CSS雕虫小技:八卦五行布图法介绍4. 软件开发和项目管理 4.1 面子驱动编程 4.2 创业公司的项目管理困境 ···············...
基于 ExtJS 的专业 ASP.NET 2.0 控件库,拥有原生的 AJAX 支持和华丽的UI效果。 ExtAspNet的使命 创建没有 JavaScript,没有 CSS,没有 UpdatePanel,没有 ViewState,没有 WebServices 的网站应用程序。 支持的...
2、另外WebSystem.WebControls.dll 中新增加了100多个各类AJAX控件,另外集成并改写了全套extjs库,同时提供了一个WEB ERP的DEMO 3、另外在WebSystem.Framework.DAO.dll 数据访问层核心库,中增加了对Oracle、Sqlite...
系统主要运用在:在系统中一些分页或者样式交互事件处理中使用到了(比如地址选择框) 前端用到了ajax AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。...
包含子模块:客户管理、客户服务、投诉处理、客户关怀、客户导入等模块 2.联系人管理 3.权限管理(重点模块) 包含子模块:功能模块、角色模块、用户模块。 4.日程/任务管理(包括日志之类的Log4J、JUnit技术) 5.项目...