开发者社区> elim1> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Ext(4)——事件响应和render问题

简介: 这里的事件响应主要是针对Button的事件响应来说的,主要有三种方式: 第一种是直接写handler: function() {},这种方式默认会去响应其click事件, 第二种是通过listeners属性来实现其事件的说明,如: listeners: {        "clic...
+关注继续查看

这里的事件响应主要是针对Button的事件响应来说的,主要有三种方式:

第一种是直接写handler: function() {},这种方式默认会去响应其click事件,

第二种是通过listeners属性来实现其事件的说明,如:

listeners: {

       "click": function() {}

第三种方式是通过on关键字来实现,如:

var btn = new Ext.Button();

btn.on("click",function() {})

 

对于render而言,如果在新建一个panel的时候指定了其render属性,那么在其后使用该对象来进行组件添加操作是不会成功的,因为有了render以后,系统会先将panel在页面上进行显示,然后通过异步的方式来执行后面的操作,所以当执行后续的添加操作时就不会进行显示了,如果确实需要这样来实现相关的添加操作,那么就可以监听其render事件,该监听方法会在render之前执行,这时候就可以把需要添加组件的操作在该方法中执行。当没有指定render属性的时候就可以随意的 进行添加操作了,只是最后需要手动的调用类似于panel.render(document.body)这样的方法。

 

 

示例代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>03.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <link rel="stylesheet" type="text/css" href="../ext4/resources/css/ext-all.css"/>
    <style type="text/css">
    	* {
    		text-align: center;
    	}
    </style>
    <script type="text/javascript" src="../ext4/ext-all-debug.js"></script>
    <script type="text/javascript">
    	Ext.onReady(function() {
    		var myPanel = new Ext.form.Panel({
    			title: "panel",
    			width: 600,
    			height: 300,
    			renderTo: Ext.getBody(),
    			defaults: {//设置一些默认属性
    				xtype: "textfield",//默认的组件类型为textfield
    				width: 480
    			},
    			items: [{fieldLabel: "name"},{fieldLabel: "address"}],
    			buttons: [{
    				text: "确定",
    				handler: function() {
    					alert("确定");
    				}
    			},{
    				text: "取消",
    				listeners: {
    					"click": function() {
    						alert("取消");
    					}
    				}
    			}]
    		});
    		var myPanel2 = new Ext.panel.Panel({
    			title: "panel2",
    			width: 600,
    			height: 300,
    			renderTo: document.body,//如果在创建的时候就把这个panel依附到了document.body等容器中,
    			//那么如果在后面直接使用myPanel2.add(component)方法添加一个组件的时候该组件不会被显示在页面上,因为
    			//在依附的时候是把依附时候的模样显示在页面上的,如果确实需要在后面添加的时候还能进行显示的话就监听其render,并
    			//在该方法中做添加操作,这样panel在依附到指定的容器中的时候就会触发该事件,此时所做的添加组件操作就可以在页面上进行
    			//显示了
    			defaults: {
    				xtype: "textfield",
    				width: 480
    			},
    			items: [{fieldLabel: "name"},{fieldLabel: "address"}],
    			listeners: {
    				"render": function() {
    					var btn1 = new Ext.Button({text: "确定", width: 100});
    					var btn2 = new Ext.Button({text: "取消", width: 100});
    					btn1.on("click",function() {
    						alert("确定");
    					});
    					btn2.on("click",function() {
    						alert("取消");
    					});
    					this.add(btn1);
    					this.add(btn2);
    				}
    			}
    		});
    		var myPanel3 = new Ext.panel.Panel({
    			title: "panel3",
    			width: 500,
    			height: 200,
    			defaults: {
    				xtype: "textfield",
    				width: 350
    			},
    			items: [{fieldLabel: "name"},{fieldLabel: "address"}]
    		});
    		myPanel3.add(new Ext.Button({text: "确定", width: 100}));
    		myPanel3.add(new Ext.Button({text: "取消", width: 100}));
    		//如果确实需要手工一步一步的添加各种组件,那么这个时候就需要手动的将生成的panel依附到指定的容器了
    		myPanel3.render(Ext.getBody());
    	});
    </script>

  </head>
  
  <body>
    
  </body>
</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
页面生命周期:DOMContentLoaded,load,beforeunload,unload
页面生命周期:DOMContentLoaded,load,beforeunload,unload
0 0
如何实现Window Form上的自定义事件
本文将介绍如何在Window窗体上自定义一个自定义事件(custom event) ,并通过订阅事件来进行事件的通知。
0 0
ext的treePanel触发tabPanel
最终的效果如下图所描述上述效果的实现过程如下所示直接上代码如上图所示,我们点击treePanel触发tabPanel的变化,因此肯定是treePanel中添加了事件响应的代码没错,就是这个它的具体代码如下 //鼠标点击treePanel的item,然后触发tabPanel新增tab,所以必须首先获取tabPanel的对象 var tab = Ext.
780 0
jQuery 事件 - unload 方法
当用户点击链接离开本页时,弹出一个消息框: $(window).unload(function(){ alert("再见"); }); 当用户离开页面时,会发生 unload 事件。 具体来说,当发生以下情况时,会发出 unload 事件: 点击某个离开页面的链接 在地址栏中键入了新的 URL 使用前进或后退按钮 关闭浏览器 重新加载页面 unload() 方
855 0
JS中onpropertychange和onchange事件区别小结
当一个HTML元素的属性用js改变的时候,都能通过onpropertychange来捕获。例如一个文本text对象的value属性被页面的脚本修改的时候,onchange无法捕获到,而onpropertychange却能够捕获。
701 0
+关注
elim1
喜欢研究技术的码农
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载