ExtJS梦想之旅（四）--Panel的使用_ext创建panel使用-优快云博客

ExtJS中Panel（面板）使用的非常多，因此在这里也作为一个重点来谈谈吧！

面板（Panel）是一种面向用户界面构建应用程序最佳的单元块，一种特定功能和结构化组件。面板包含有底部和顶部的工具条，连同单独的头部、底部和body部分。它提供内建都得可展开和可闭合的行为，连同多个内建的可制定的行为的工具按钮。面板可简易地置入任意的容器或布局，而面板和渲染管线（rendering pipeline）则由框架完全控制。

下面演示Panel的使用：

panel.js

// 面板的使用
Ext.onReady(function() {
	// 创建一个按钮
	var btn = new Ext.Button({
		text : "按钮一"
	});
	// 创建一个面板
	var panel = new Ext.Panel({
		title : "我的面板",
		width : 500,
		height : 500,
		// 将面板渲染到body中
		renderTo : Ext.getBody(),
		// 给工具栏添加按钮图标
		tools : [ {
			id : "save"
		}, {
			id : "help"
		}, {
			id : "print",
			handler : function() {
				window.print();
			}
		} ],
		// collapsible配置项表示指定该面板是否能被收缩和展开true表示为面板是可收缩的
		collapsible : true,
		// 顶部工具栏
		tbar : [ {
			text : "保存"
		}, "-", {
			text : "关闭"
		} ],
		// 底部工具栏
		bbar : [ {
			text : "上一页"
		}, {
			text : "下一页"
		} ],
		// 将底部按钮居中
		buttonAlign : "center",
		// 在面板底部添加按钮
		buttons : [ {
			text : "添加内容",
			// 处理按钮的单击事件
			handler : function() {
				panel.add({
					id : "panel2",
					title : "面板三"
				});
				panel.doLayout();
			}
		}, {
			text : "删除内容",
			handler : function() {
				panel.remove("panel2");
			}
		}, {
			text : "更新内容",
			handler : function() {
				// panel.load("news.jsp");
				panel.body.update("<h1>当前时间</h1>" + new Date());
			}
		} ],

		// 除了这些声明以外的其余都放置在panel的body部分
		// 这里放置html中的h1标签
		// html : "<h1>这是body部分</h1>",
		// 加载网页的内容显示在面板body上
		// autoLoad : "news.jsp"
		// items选项内容会自动加到面板的body部分
		items : [ btn, {
			xtype : "button", // xtype是指定控件的类型，比如是按钮；如果不指定xtype则默认是面板
			text : "按钮二"
		}, {
			title : "面板二",
			width : 400,
			height : 200,
			// 设置边框显示为无
			border : false
		} ]
	});
});

panel.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>ExtJS-Pane组件</title>
<link href="ext-3.4.1/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
<script type="text/javascript" src="panel.js"></script>
</head>
<body>

</body>
</html>