- 浏览: 1615064 次
- 性别:
- 来自: 长春
文章分类
- 全部博客 (309)
- ext (19)
- web (13)
- PHP (19)
- 互联网新闻 (3)
- oracle (3)
- Mootools (1)
- FLEX (3)
- 人在职场 (2)
- hibernate (24)
- spring2 (1)
- J2SE (24)
- WEB_UI (14)
- 其它 (11)
- Log4J (1)
- iText (10)
- SQL (11)
- 设计模式 (3)
- lucene (6)
- 开源项目 (2)
- javascript (20)
- 软件&破解补丁 (48)
- Quartz (2)
- 解决方案 (1)
- 工作存档 (2)
- JAVA对文件操作 (2)
- C&C#&VC (1)
- struts2 (3)
- 版本控制 (2)
- 软考基础 (23)
- JBPM (2)
- velocity (4)
- javamail (3)
- HttpClient (9)
- 虚拟化技术 (2)
- 报表 (3)
- ibatis (5)
- Spring (4)
- 信用卡 (0)
- 芒果钱包 (0)
- 养卡 (0)
最新评论
-
a601962168:
...
通过JAVA与串口(RS232)通信实例 -
olive009:
...
Adobe Acrobat 9 Pro & Pro Extended 中文版/英文版 下载及破解补丁 -
overshit:
api更新了,一加filter就Callback filter ...
深入浅出CGlib-打造无入侵的类代理 -
u010778233:
写得很不错,已经用起来了,谢谢
将jdbc结果集转换成对象列表 -
924060929:
我想找就是要这个功能!!!!!!!!
velocity基础教程--2自定义ResourceLoader实现字符模板
javascript的事件我们用的最多的就是用于表单验证
现在我们来看一下一个button按钮事件的写法
最简单的直接写入标签中
常用的事件绑定写法
我们也可以将事件方法单提出来,这种写法更有利于方法的重用
下面我们来看看ext强大的事件机制
Ext.util.Observable : 支持事件相应的组件或元素都继承于该类。只有继承该类的子类才会拥有事件响应功能。
下面我们来用Ext实现一下类的继承
extend第三个参数的具体用法如下
有一个问题 如果父类中定义了一个方法
这个是与js的对象创建有关
由于我是采用new SubClass();但是子类并没有实际对父类进行初始化,所以我们应该强制调用父类的构造函数进行父类的初始化创建
这样我们才算完成了一个完整的继承
我们已经了解了继承,下面我们定义一个对象来继承Ext.util.Observable,定义事件
要实现事件的响应功能 这个类必须继承Observable
下面我们来对一个html页面元素进行事件的绑定操作
也可以用Ext.EventManager进行事件的绑定
注意如果绑定两个事件,注意先后顺序,这里先触发hello2然后触发hello
我们让稍微改变一下hello方法
这里弹出了el的id的值"abc"
如果我们将el.addListener("click",hello)中添加一个参数变成
el.addListener("click",hello,this)
很奇怪 alert出的竟是ext-gen1,这是为什么呢?
主要是addListener中有四个参数,前两个参数已经很明白了
第三个参数是scope(作用域),在不加参数的时候hello方法中的this表示的是真正作用于事件中的对象,el.addListener("click",hello,this)中的this表示的是这个方法所在的对象即匿名类(将这个对象传进后)
function() {
//通过Ext.get("id")获得页面元素,不过这里返回的是ExtElement的对象
var el = Ext.get("abc");
el.addListener("click",hello,this)
}
该对象是Ext创建的所以Ext会自动为改对象创建一个id,因为将这个对象传进去了所以hello方法中的this就变成该匿名类的对象了,其id属性自然也跟着转变了。
下面清楚的显示出作用域的含义
这里将弹出hello,如果el.on("click",onClick,this);去掉this那么onClick事件中的this就是el自身,实际上onClick中的this表示的就是scope传过来的对象指针,如果不传则代表自身
Observable中的listener
下面我们来看一下第四个参数包括
scope :作用域
delay :响应函数的延迟时间(毫秒)
single :是否只执行一次
buffer :函数的延迟(在延迟之中不会再次响应)
需要注意delay和buffer不能同时应用,还有就是scope同第三各参数冲突
多个事件可以依次绑定,不过也可以在同一个on方法下绑定
还可以在on方法下这样绑定
Ext.EventObject :浏览器标准事件类
我们将a标签上添加一个点击事件
<a href="http://www.g.cn" id="g">谷歌</a>
我们发现 他是先alert出我们定义的事件 然后又完成了跳转
现在我们不希望他进行跳转 怎么做呢?
首先实际在方法调用的时候是隐士的传递过去了一个EventObject
我们已近看到了 他确实可以获取eventObject
他有一个阻止事件继续发生的方法stopEvent
我们可以通过该方法阻止他的后续事件发生
这样就不会继续进行页面跳转了。
下面我们见一下例子 window事件使用的例子
现在我们来看一下一个button按钮事件的写法
最简单的直接写入标签中
<input type="button" name="abc" id="abc" value="abc" onclick="alert('abc');"/> <br/> <a href="http://www.g.cn">谷歌</a>
常用的事件绑定写法
<script> window.onload = function(){ var el = document.getElementById("abc"); el.onclick = function(){ alert("abc"); } } </script> <input type="button" name="abc" id="abc" value="abc"/> <br/> <a href="http://www.g.cn">谷歌</a>
我们也可以将事件方法单提出来,这种写法更有利于方法的重用
<script> window.onload = function(){ fc = function(){ alert("abc") }; var el = document.getElementById("abc"); el.onclick = fc; el.onmouseover = fc; } </script> <input type="button" name="abc" id="abc" value="abc"/> <br/> <a href="http://www.g.cn">谷歌</a>
下面我们来看看ext强大的事件机制
Ext.util.Observable : 支持事件相应的组件或元素都继承于该类。只有继承该类的子类才会拥有事件响应功能。
下面我们来用Ext实现一下类的继承
//定义一个父类 BaseClass = function(){ } //定义父类的属性及方法 BaseClass.prototype.name = ""; BaseClass.prototype.say = function(){ alert("hello" + this.name); } //定义一个子类 SubClass = function(){ //在子类中定义一个方法,使用this指定作用域,不能省略 this.hello = function(){ alert("hello subclass"); }; } //使用Ext进行继承,可以接受三个参数(子类,父类,重载的方法(配置选项的数组)) Ext.extend(SubClass,BaseClass); //新建一个子类 var sub = new SubClass(); sub.hello(); //子类已经拥有了父类的方法了 sub.say();
extend第三个参数的具体用法如下
Ext.extend(SubClass,BaseClass,{ //子类重新定义了父类方法 say:function(){ alert("hello say"); }, //子类扩展的一个方法 walk:function(){ alert("i walking"); } }); //新建一个子类 var sub = new SubClass(); sub.hello(); //子类已经拥有了父类的方法了 sub.say(); sub.walk();
有一个问题 如果父类中定义了一个方法
BaseClass = function(){ this.jump = function(){ alert("jump"); } } BaseClass.prototype.name = ""; BaseClass.prototype.say = function(){ alert("hello" + this.name); } SubClass = function(){ this.hello = function(){ alert("hello subclass"); }; } //使用Ext进行继承,可以接受三个参数(子类,父类,重载的方法(配置选项的数组)) Ext.extend(SubClass,BaseClass,{ say:function(){ alert("hello say"); }, walk:function(){ alert("i walking"); } }); //新建一个子类 var sub = new SubClass(); sub.hello(); //子类已经拥有了父类的方法了 sub.say(); sub.walk(); //该方法并不会被调用 sub.jump();
这个是与js的对象创建有关
由于我是采用new SubClass();但是子类并没有实际对父类进行初始化,所以我们应该强制调用父类的构造函数进行父类的初始化创建
//定义一个父类 BaseClass = function(){ this.jump = function(){ alert("jump"); } } //定义父类的属性及方法 BaseClass.prototype.name = ""; BaseClass.prototype.say = function(){ alert("hello" + this.name); } //定义一个子类 SubClass = function(){ //强制调用父类的构造方法,对父类初始化 SubClass.superclass.constructor.call(this); //在子类中定义一个方法,使用this指定作用域,不能省略 this.hello = function(){ alert("hello subclass"); }; } //使用Ext进行继承,可以接受三个参数(子类,父类,重载的方法(配置选项的数组)) Ext.extend(SubClass,BaseClass,{ say:function(){ alert("hello say"); }, walk:function(){ alert("i walking"); } }); //新建一个子类 var sub = new SubClass(); sub.hello(); //子类已经拥有了父类的方法了 sub.say(); sub.walk(); sub.jump();
这样我们才算完成了一个完整的继承
我们已经了解了继承,下面我们定义一个对象来继承Ext.util.Observable,定义事件
Employee = function(){ //定义一个事件名 this.addEvents("eve"); } Ext.extend(Employee,Ext.util.Observable); //定义一个事件操作 todo = function(){ alert("我要去做一件事"); } var em = new Employee(); //将事件名称与事件操作绑定 em.on("eve",todo); //通过名称触发具体事件行为 em.fireEvent("eve");
要实现事件的响应功能 这个类必须继承Observable
下面我们来对一个html页面元素进行事件的绑定操作
<html> <head> <title>index.html</title> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css"> <script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="./ext/ext-all.js"></script> <script type="text/javascript"> Ext.onReady(function() { //通过Ext.get("id")获得页面元素,不过这里返回的是ExtElement的对象 var el = Ext.get("abc"); //该属性返回undefine因为ExtElement不存在该属性 //alert(el.value); //var htmlel = Ext.getDom("div"); //alert(htmlel.innerHTML); /** * document.getElementById("id")返回的是html的Element * 也可以通过Ext.getDom("id")方式获得 * 需要注意ExtElement对象和HtmlElement对象的区别 * 比如.innerHTML属性在ExtElement中就不存在 */ //之前我们用on进行事件的绑定,实际上on是addListener的缩写 el.addListener("click",hello) /** * 由于el是html元素所以自身就有click事件,而且可以自身接受触发 * 触发的时候就会调用hello方法 * 实际就是设置一个监听,在el元素的click事件上 */ }); hello = function(){ alert("hello"); } </script> </head> <body> <input type="button" name="abc" id="abc" value="abc" /> <br/> <a href="http://www.g.cn">谷歌</a> <br/> <div id="div">abc</div> </body> </html>
也可以用Ext.EventManager进行事件的绑定
Ext.onReady(function() { //通过Ext.get("id")获得页面元素,不过这里返回的是ExtElement的对象 var el = Ext.get("abc"); //我们也可以通过Ext.EventManager来设置监听器 Ext.EventManager.addListener(el,"click",hello); Ext.EventManager.addListener(el,"mouseover",hello2); }); hello = function(){ alert("hello"); }; hello2 = function(){ alert("hello2"); }
注意如果绑定两个事件,注意先后顺序,这里先触发hello2然后触发hello
el.addListener("click",hello) el.addListener("click",hello2)
我们让稍微改变一下hello方法
Ext.onReady(function() { //通过Ext.get("id")获得页面元素,不过这里返回的是ExtElement的对象 var el = Ext.get("abc"); el.addListener("click",hello) }); hello = function(){ //alert("hello"); alert(this.id); };
这里弹出了el的id的值"abc"
如果我们将el.addListener("click",hello)中添加一个参数变成
el.addListener("click",hello,this)
很奇怪 alert出的竟是ext-gen1,这是为什么呢?
主要是addListener中有四个参数,前两个参数已经很明白了
第三个参数是scope(作用域),在不加参数的时候hello方法中的this表示的是真正作用于事件中的对象,el.addListener("click",hello,this)中的this表示的是这个方法所在的对象即匿名类(将这个对象传进后)
function() {
//通过Ext.get("id")获得页面元素,不过这里返回的是ExtElement的对象
var el = Ext.get("abc");
el.addListener("click",hello,this)
}
该对象是Ext创建的所以Ext会自动为改对象创建一个id,因为将这个对象传进去了所以hello方法中的this就变成该匿名类的对象了,其id属性自然也跟着转变了。
下面清楚的显示出作用域的含义
Ext.onReady(function(){ function AA(){ this.first = "hello"; var el = Ext.get("abc"); //这里this是AA的实力 el.on("click",onClick,this); } //实例化 new AA(); }); onClick = function(){ alert(this.first); }
这里将弹出hello,如果el.on("click",onClick,this);去掉this那么onClick事件中的this就是el自身,实际上onClick中的this表示的就是scope传过来的对象指针,如果不传则代表自身
Observable中的listener
下面我们来看一下第四个参数包括
scope :作用域
delay :响应函数的延迟时间(毫秒)
single :是否只执行一次
buffer :函数的延迟(在延迟之中不会再次响应)
需要注意delay和buffer不能同时应用,还有就是scope同第三各参数冲突
Ext.onReady(function(){ function AA(){ this.first = "hello"; var el = Ext.get("abc"); el.on("click",onClick,this,{ delay:1000, single:true, //buffer:1000 }); } //实例化 new AA(); }); onClick = function(){ alert(this.first); }
多个事件可以依次绑定,不过也可以在同一个on方法下绑定
Ext.onReady(function(){ function AA(){ this.first = "hello"; var el = Ext.get("abc"); el.on({ click:onClick, mouseover:onClick, scope:this }) } //实例化 new AA(); }); onClick = function(){ alert(this.first); }
还可以在on方法下这样绑定
el.on({ click:{ delay:1000, fn:onClick, scope:this }, mouseover:{ delay:1000, fn:onClick } })
Ext.EventObject :浏览器标准事件类
我们将a标签上添加一个点击事件
<a href="http://www.g.cn" id="g">谷歌</a>
Ext.onReady(function(){ var el = Ext.get("g"); el.on("click",onClick); }); onClick = function(){ alert(this.id); }
我们发现 他是先alert出我们定义的事件 然后又完成了跳转
现在我们不希望他进行跳转 怎么做呢?
首先实际在方法调用的时候是隐士的传递过去了一个EventObject
onClick = function(e){ var htmlel = e.getTarget();//返回事件发生的htmlElement alert(htmlel.innerText); }
我们已近看到了 他确实可以获取eventObject
他有一个阻止事件继续发生的方法stopEvent
我们可以通过该方法阻止他的后续事件发生
onClick = function(e){ var htmlel = e.getTarget(); alert(htmlel.innerText); e.stopEvent(); }
这样就不会继续进行页面跳转了。
下面我们见一下例子 window事件使用的例子
Ext.onReady(function(){ var win = new Ext.Window({ title:'hello', html:"hello world!", width:300, height:300 }) win.show(); win.on("move",moving);//move方法会自动传递过去三个参数,具体见window文档 }); moving = function(c,x,y){ alert(c.id+" "+x+" "+y); }
发表评论
-
ExtJS 2 系列教程
2009-02-08 18:23 3257如果大家对JEE的深入研究有兴趣 可以加入Q群:4617650 ... -
[ExtJS2.1教程-7]Tree(树控件)
2009-02-08 18:10 8061树控件: 树是由根节点、叶子节点、非叶子节点(目录节点)组成的 ... -
[ExtJS2.1教程-6]Tip(提示框)
2009-02-08 09:32 8185信息提示框是指当我们把鼠标移动并停留到页面上的某一个元素上时, ... -
[ExtJS2.1教程-5]ToolBar(工具栏)
2009-02-07 09:25 9699面板中可以有工具栏,工具栏可以位于面板顶部或底部,Ext中工具 ... -
[ExtJS2.1教程-4]Menu(菜单)
2009-02-04 21:20 9883menu.html <html> < ... -
[ExtJs 2.02]Grid默认选择首行并允许键盘操作
2009-01-23 14:39 4192grid默认选中第一行问题解决了 grid.getSelect ... -
[电子书]LearningExtJS(完整版2.01 en)
2009-01-22 11:11 2309What you will learn from this ... -
[ExtJs 2.02]ajax文件上传
2009-01-21 15:32 7180例子是网上找的,不过是php的 给转成jsp 吧中间遇到的问题 ... -
[ExtJs 2.02]Combobox的使用
2009-01-21 10:51 28211.简单使用: <!DOCTYPE HTML PUB ... -
grid设置某列背景颜色
2009-01-16 10:47 1823css .x-grid-back-red { back ... -
grid设置某行字体颜色
2009-01-16 10:34 3536css代码 .x-grid-record-red ... -
Ext2.0.2用于netbeans的JavaScript的库
2009-01-05 14:39 1672Ext2.0.2用于netbeans的JavaScript的库 ... -
Ext2.1API中文文档
2009-01-04 08:58 2515Ext2.1API中文文档 基本上Ext2系列都实用 需要Ad ... -
[ExtJS2.1教程-2]组件的使用
2009-01-02 19:09 2634我们还是以alert为例 首 ... -
[ExtJS2.1教程-1]HelloWorld
2009-01-02 14:16 2655ExtJS:一个很强大的ui库 创建一个漂亮的alert &q ... -
Ext Tree控件的使用
2008-12-21 19:35 19682树是一个我们日常用的组件,Ext给我们提供了一个非常好用的树控 ... -
ext的一些组件中常用的参数整理
2008-04-15 05:33 2513grid 中的render里的参数: value:当前单元格 ... -
Ext Docs(2.0) 本地化处理,已生成CHM文件了
2008-01-15 16:27 4293ext2 的chm文档 ajaxjs论坛上发现的 不敢独享~~ ...
相关推荐
2. 对ExtJs的态度 3 3. Ext.form概述 4 4. Ext.TabPanel篇 5 5. Function扩展篇 7 6. Ext.data.Store篇 10 7. Ext.data.JsonReader篇一 12 8. Ext.data.JsonReader篇二 15 9. Ext.data.HttpProxy篇 19 10. Ext.data....
NULL 博文链接:https://lovebeyond.iteye.com/blog/1197784
extjs demo; blog url:http://write.blog.csdn.net/postlist
ExtJS入门教程-超级详细-共36页 完整版 PDF,电子书方便阅读和分享。
extjs-theme-bootstrap-master.zip
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
很强大的开发包,能做出和WINDOWS一样的操作界面
「extjs入门教程-SSHMavenExtjs4MySQL实战开发」.docx
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
extjs 2.1 中文文档\电子文档extjs 2.1 中文文档\电子文档
ExtJS快速入门--传智播客--蔡世友
语言程序设计资料:ExtJs学习笔记-2积分.doc
extjs2----关于extjs 的使用,操作.比较初级,但是也比较使用。适合初步接触extjs的朋友
Extjs2.1源码%2B教程,对于想学习ExtJS的人来说是再好也不过了
ExtJS----HelloWorld程序源码
extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包(分为32位和64位)和教程,一共四部分
EXTJS4 类似于bootstrap的主题
Extjs4---combobox省市区三级联动+struts2
Extjs4---grid的修改、删除功能---结合struts2、hibernate