ExtJS梦想之旅（三）--综合练习（Ext窗口的使用和事件驱动编程）

本文链接：https://blog.csdn.net/javachenzhenlin/article/details/9427745

通过前面对ExtJS的初步学习，现在来综合起来做一个总结。

使用ExtJS完成需求：当页面载入时创建一个Ext窗口，该窗口上有两个按钮，当单击按钮一的时候弹出一个普通窗口，当单击

按钮二的时候弹出一个窗口，该窗口中显示一棵树。

最后的完成截图：

实现：

ext-test1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ext测试一：显示窗口</title>
<!-- 第一步：引如Ext的样式文件 -->
<link href="ext-3.4.1/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<!-- 第二步：引入Ext适配器驱动 -->
<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<!-- 第三步：引入Ext库文件 -->
<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
<!-- 第四步：引入自己编写的实现功能 -->
<script type="text/javascript" src="ext-test1.js"></script>
</head>
<body>

</body>
</html>

ext-test1.js

/*
 * 注意这里调用函数式不能加括号的， 因为如果加了括号的话，函数就会马上执行了将执行的结果返回给onReady， 因此就会执行undefined的
 */
Ext.onReady(showWindow2);

function showWindow2() {
	// 创建一个窗口
	var win = new Ext.Window({
		// 窗口标题
		title : "Ext",
		// 窗口宽度
		width : 300,
		// 窗口高度
		height : 300,
		// 添加两个按钮
		buttons : [ {
			// 按钮上的文本
			text : "单击我",
			// 处理按钮的单击事件
			handler : function() {
				// 当单击按钮时创建一个窗口
				new Ext.Window({
					title : "普通窗口",
					width : 100,
					height : 100,
					// 窗口中的内容
					html : "<font color='red'><b>我是普通窗口</b></font>"
				}).show();
			}
		}, {// 这里是第二个按钮
			text : "单击我创建树",
			handler : function() {
				var win = new Ext.Window({
					title : "树窗口",
					width : 250,
					height : 250,
					html : tree
				});
				// 将树添加到窗口中
				win.add(tree);
				// 显示窗口
				win.show();
			}
		} ]
	}).show();
	// 创建一棵树
	var tree = new Ext.tree.TreePanel({
		// 树宽度
		width : 200,
		// 树的高度
		height : 200,
		// 树的根节点
		root : new Ext.tree.AsyncTreeNode({
			text : "圣诞树",
			// 树的子节点一
			children : [ {
				text : "叶子节点一",
				// 树的孙节点
				children : [ {
					text : "孙节点一",
					// leaf配置选项表示是否作为叶子节点显示；true表示是叶子节点，false表示不是叶子节点
					leaf : true
				} ]
			}, {// 树的叶子节点二
				text : "页子节点二",
				leaf : true
			} ]
		})
	});
}

上面的例子是对窗口的使用和Ext事件驱动编程的一个总结。