这里的事件响应主要是针对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>
分享到：
相关推荐
### Extjs4 API文档阅读（三）——布局和容器 #### 一、容器与基本概念 在Ext JS中，容器(Container)是一种特殊的组件，能够容纳其他组件。这使得Ext JS非常灵活，能够构建复杂的用户界面。容器是构成Ext JS应用...
### Ext表格控件和树控件 #### 表格控件 ##### 1.1 基本表格 `GridPanel` 在Ext JS框架中，`GridPanel` 是一种用于展示和管理表格数据的重要组件。它提供了丰富的功能，例如排序、缓存、拖动列、隐藏列、自动显示...
- **Ext.onReady事件**：讲解了如何使用Ext.onReady事件来确保页面加载完成后再执行脚本，避免错误。 - **让界面动起来**：介绍了如何使用ExtJS的动画效果，使界面更加生动有趣。 - **Ext.Fx类与Ext.Element类中的...
深入分析了render方法的作用和工作原理，即如何将组件渲染到DOM树中，并保持其状态和外观的一致性。 ### 第八部分：按钮与日期选择器 #### 一、开始组件学习之旅 标志着从基本组件的学习开始，逐步构建更复杂的...
4. **组件渲染方法render** - 组件渲染的核心方法，控制组件如何在页面中显示。 #### 九、按钮与日期选择器 1. **按钮组件** - 详细介绍ExtJs中按钮组件的功能和配置。 2. **日期选择器** - Ext.DatePicker组件...
- **事件**：学习如何监听并响应树节点相关的事件。 #### 第二十六章：远程获取节点数据 - **异步加载解析**：实现异步加载树节点数据。 #### 第二十七章：选项卡面板——Ext.TabPanel - **TabPanel概述**：介绍...
在本篇Flask学习笔记（4）中，我们将深入探讨Python的微框架——Flask，它以其轻量级、灵活性和强大的扩展性深受开发者喜爱。Flask是构建Web应用的理想选择，尤其适合初学者和小型项目。以下是笔记的主要内容： 1. ...
- 通过`Ext.extend`和`Ext.override`方法可以实现类的继承和重写。 - **配置(config)选项** - 配置选项是Extjs组件的核心，用于设置组件的各种属性和行为。 - 通常在组件构造函数中通过传递一个配置对象来指定...