ExtJs 学习笔记基础篇 Ext组件的使用

Extjs提供了一套强大的事件处理机制，专门处理用户动作、监控控件状态、更新控件视图信息、与服务器交互等等。事件由Ext.EventManager对象管理，与浏览器W3C标准事件对象Event相对应，Ext封装了一个Ext.EventObject事件对象。支持事件处理的类（或为接口）为Ext.util.Observable,凡事继承该类的组件或类都支持往对象中添加时间处理及响应功能。
我们在页面上加一个按钮
<input type="button" id="btntest" value="测试事件">
在写一个函数
function eventtest(){
Ext.Msg.alert("提示","触发了一个事件！");
}
下面通过Ext的事件处理机制为btntest这个按钮添加一个点击事件，点击后调用eventtest方法。
Ext.onReady(
function(){
Ext.get("btntest").addListener("click",eventtest);
}
);
在Ext组件加载完毕后直接给按钮添加一个click事件。Ext.get("btntest").addListener(事件,事件执行方法，无需加括弧);
Ext还支持延迟事件处理缓存等功能，比如下面的代码：
Ext.get("btntest1").addListener("click",eventtest,this,{delay:2000});
<input type="button" id="btntest1" value="延迟事件">
Ext.get("btntest1").addListener("click",eventtest,this,{delay:2000});这句代码为按钮注册了一个click事件，但会延迟2000毫秒执行。
可以为html元素添加事件了，我们还可以控制Ext组件的事件，在看一个例子。
function eventwindow(){
var win=new Ext.Window({
title:"控制Ext组件的事件",
height:200,
width:300
});
win.on(
"beforedestroy",
function(obj){
Ext.Msg.alert("哈哈","你关不掉了吧！");
obj.show();
return false;
}
);
win.show();
}
每个组件都含有beforedestroy事件，Ext会在销毁这一组件时触发该事件。 这段代码会显示一个窗体，并且点击关闭按钮时会失效。通过Window的on方法来控制.. on(事件,事件执行函数).由于窗口对象的beforedestroy事件响应函数返回值为false，因此执行这段程序，窗体才无法关闭。组件的时间监听器也可以直接在构造函数中直接声明，下面的代码会和上面同一效果：
function eventwindow(){
var win=new Ext.Window({
title:"控制Ext组件的事件",
height:200,
width:300,
listeners:{
"beforedestroy":
function(obj){
Ext.Msg.alert("哈哈","你关不掉了吧！");
obj.show();
return false;
}
}
});
win.show();
}
效果如下：

OK，这就是Ext组件的介绍与使用。各位有什么问题可以留言一起讨论，有什么不对的地方请指正。
此文章中用的例子都只是简单介绍，后面会详细讲解。
文章中案例代码下载 http://xiazai.jb51.net/200812/yuanma/jb51.net_ExtJsDemo2.rar

最新评论