tesia
- 浏览: 33307 次
- 性别:
- 来自: 广州
-
最新评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无</title>
<link rel="stylesheet" type="text/css" href="ext-4.0.7-gpl/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.0.7-gpl/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.0.7-gpl/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var Person=Ext.extend(Ext.util.Observable,{
constructor:function(name){
this.name=name; //this表示的是作用域，相当于指针，指向了Person的对象
this.sayNum=0;
//该事件的响应方法 在第3次单击say按钮时触发onSay事件
this.say=function(){
if(this.sayNum<2){
this.sayNum+=1;
alert('I am '+name);
}else{
// alert(0)
this.sayNum=0; //触发自定义事件后计数归零
this.fireEvent('onSay',this); //激发自定义事件 onSay是加载事件时候的事件名字
}
}
this.addEvents({"onSay":true}); //加入自定义事件
}
});
//创建对象
window.per=new Person('tom');
//为自定义事件绑定处理函数
per.addListener('onSay',function handler(){
alert('发生了自定义事件');
});
//为per对象添加拦截器
Ext.util.Observable.capture(per,captureFunction);
//拦截函数
function captureFunction(eventName){
if(eventName=='onSay'){ //事件名称是onSay则返回 false终止事件的执行
alert("拦截事件："+eventName+"。");
return false;
}
return true;
}
});
</script>
</head>
<body>
<table>
<tr>
<td><button type="button" id="btn" style="width:50px;height:30px;" value="say" onclick="per.say()" >确定</button></td>
</tr>
</table>
</body>
</html>
-----------------------
<link rel="stylesheet" type="text/css" href="ext-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
导入这个4.2.1的包就不可以
capture拦截器
Extjs通过capture方法为事件的执行提供了拦截器功能，给了我们控制是否执行特定事件的能力。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无</title>
<link rel="stylesheet" type="text/css" href="ext-4.0.7-gpl/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.0.7-gpl/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.0.7-gpl/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var Person=Ext.extend(Ext.util.Observable,{
constructor:function(name){
this.name=name; //this表示的是作用域，相当于指针，指向了Person的对象
this.sayNum=0;
//该事件的响应方法 在第3次单击say按钮时触发onSay事件
this.say=function(){
if(this.sayNum<2){
this.sayNum+=1;
alert('I am '+name);
}else{
// alert(0)
this.sayNum=0; //触发自定义事件后计数归零
this.fireEvent('onSay',this); //激发自定义事件 onSay是加载事件时候的事件名字
}
}
this.addEvents({"onSay":true}); //加入自定义事件
}
});
//创建对象
window.per=new Person('tom');
//为自定义事件绑定处理函数
per.addListener('onSay',function handler(){
alert('发生了自定义事件');
});
//为per对象添加拦截器
Ext.util.Observable.capture(per,captureFunction);
//拦截函数
function captureFunction(eventName){
if(eventName=='onSay'){ //事件名称是onSay则返回 false终止事件的执行
alert("拦截事件："+eventName+"。");
return false;
}
return true;
}
});
</script>
</head>
<body>
<table>
<tr>
<td><button type="button" id="btn" style="width:50px;height:30px;" value="say" onclick="per.say()" >确定</button></td>
</tr>
</table>
</body>
</html>
-----------------------
<link rel="stylesheet" type="text/css" href="ext-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-4.2.1/bootstrap.js"></script>
<script type="text/javascript" src="ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
导入这个4.2.1的包就不可以
capture拦截器
Extjs通过capture方法为事件的执行提供了拦截器功能，给了我们控制是否执行特定事件的能力。
分享到：
发表评论
-
Ext.data.TreeStore 分级异步加载树节点示例
2013-07-10 15:36 2068Ext.data.TreeStore远程加载树节点有两种常用方 ... -
Ext.Ajax.request提交JSON数据
2013-07-10 09:29 1359JSON作为轻量级的数据传输格式，在很多时候可以作为XML文件 ... -
Ext.Ajax.request提交XML数据示例
2013-07-09 16:51 938服务器端：loginServerXml.jsp 在lib下要有 ... -
Ext.Ajax.request异步提交表单示例
2013-07-09 16:10 1047服务器端代码：loginServer.jsp <%@ ... -
树形面板Ext.tree.Panel
2013-07-05 15:19 647<!DOCTYPE html PUBLIC " ... -
relayEvents传播分发事件
2013-07-04 14:17 693<!DOCTYPE html PUBLIC " ... -
改变文档样式风格示例
2013-07-04 10:55 772<!DOCTYPE html PUBLIC " ... -
ExtJS事件绑定方式示例
2013-07-04 10:55 672<!DOCTYPE html PUBLIC " ... -
Ext.util.JSON编码和解码JSON对象
2013-07-03 15:27 943<script type="text/java ... -
Ext.util.Format提供的常用格式化方法
2013-07-03 14:57 1330<!DOCTYPE html PUBLIC " ... -
Ext.util.ClickRepeater 事件的配置和触发
2013-07-03 11:55 745Ext.util.ClickRepeater 继承Ext.ut ... -
样式表的创建和规则获取示例
2013-07-03 10:44 514<!DOCTYPE html PUBLIC " ... -
Ext.KeyNav为元素提供简单的按键处理方法示例
2013-07-03 09:46 844<!DOCTYPE html PUBLIC " ... -
Ext常用函数
2013-07-01 16:42 628函数一：Ext.onReady（） Ext的Dom都是动态生成 ... -
水平盒布局HBox
2013-07-01 15:43 481<!DOCTYPE html PUBLIC " ... -
表格布局
2013-07-01 15:18 521<!DOCTYPE html PUBLIC " ... -
Ext.layout.container.Column布局
2013-07-01 15:18 746<script type="text/java ... -
Absolute绝对位置布局示例
2013-07-01 14:35 395Ext.layout.container.Absolute对应 ... -
Card 卡片式布局
2013-06-28 16:40 949<!DOCTYPE html PUBLIC " ... -
Ext.layout.container 标准布局类
2013-06-28 15:48 766<!DOCTYPE html PUBLIC " ...
相关推荐
### ExtJs自定义消息框详解 #### 一、引言 在Web开发中，与用户的交互体验至关重要。作为一款优秀的JavaScript框架，ExtJs提供了多种工具和组件帮助开发者快速构建高质量的用户界面。其中，消息框作为一种常见的...
### Extjs自定义组件——下拉树：深入解析与实现 在现代Web开发中，Extjs作为一款功能强大且灵活的框架，深受开发者喜爱。它提供了丰富的UI组件库，能够帮助开发者快速构建复杂的用户界面。其中，自定义组件是Extjs...
xtype : 'jxcombo' //配置项 jxValueField:要获取值得字段名称，默认null //公共方法 getJXValue():返回自定义字段的值，如果没有自定义字段，则等价Ext.form.Combo类的getValue()方法
在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 因为我开发测试完这个分页工具后, 电脑上显示刚好是15:00, 所以取名: PM3PagingToolbar 如有BUG还请各位提出或留言. ...
在本文中，我们将深入探讨如何使用ExtJS框架来实现自定义树结构以及动态表头的功能。ExtJS是一款强大的JavaScript库，常用于构建富客户端应用程序，它提供了丰富的UI组件和强大的数据绑定机制。VS2015是Visual ...
1.ExtJS自定义组件，图片按钮为例. 2.此图片按钮背景完全为图片，没有边框，需要使用者提供2张图片，一张初始化用，一张点击后用,可在'imgPaths:'属性里填写,格式为'01.jpg~02.jpg' 3.解压后请将所有附件放置您extjs...
ExtJS是一款强大的JavaScript...以上就是关于ExtJS自定义控件的基本知识，包括创建、配置、事件处理、实例化以及使用中的最佳实践。理解并熟练掌握这些概念和技术，将有助于开发出高效、灵活且富有特色的ExtJS应用。
extjs验证 extjs验证 extjs验证 extjs验证extjs验证 extjs验证 extjs验证 extjs验证
在 ExtJS3.3基础上开发的. 低一点的版本应该也能用. 没有去测试. 参考: Ext.PagingToolbar.js 如有BUG还请各位提出或留言. 附件中有图片, 一看就知道. 用法: var grid = new Ext.grid.GridPanel({ bbar: new Ext....
在这个场景中，"自定义高级查询Extjs"指的是利用Ext JS框架来构建这样的功能。Ext JS是一个流行的JavaScript库，用于创建富客户端应用程序，特别是与数据展示和操作相关的Web应用。 1. **Ext JS简介** - Ext JS...
功能: 1.实现ExtJS tree 节点右键菜单 实现增删查. 2.实现针对实体数据的动态搜索. 3.代码命名规范，简单易懂. 4.支持IE 9,FF 19.0.2. 5.将文件解压至ext包example任意组件文件夹即可浏览效果.
TreeField: 扩展ExtJs4的Ext.form.field.Picker类，当点击下拉框时，异步加载树形结构数据的所有层级，需要后台提供树形结构数据，同时提供当树形列表选择改变后（selectionchange）等自定义事件，和是否为多选，父...
Extjs4.2自定义ComboTree
测试EXTJS4中的特性：config, extend, statics, mixins。 测试EXTJS自定义事件：当恐怖分子（Terrorist）在火车站掏刀时，触发一个砍人事件。警察将抓捕他。 群众（Person）看到砍人吓坏了。
xtype : 'jxmonthfield' ...//公共事件 select：function(JXMonthField this, Array dates),当选定某些时间值（点击“确定”）时触发，传入参数：this，控件本身，dates，所选中的时间对象数组（不论是否支持多选）
"extjs4自定义深蓝色主题"是针对ExtJS4框架的一个特定主题设计，旨在为应用程序提供一种专业且深沉的视觉体验。 这个主题继承自ExtJS4的经典（Classic）主题，这意味着它在保持原有组件结构的基础上，对颜色、字体...
Extjs4.2 设置tabpanel当前活动页签的样式 Extjs是一个流行的JavaScript框架，用于构建丰富互联网应用程序（RIA）。其中，tabpanel是Extjs中一个常用的控件，用于显示多个面板。设置tabpanel当前活动页签的样式是...