ExtJS专题-选项面板(1)
上一次我们学习了表格面板GridPanel，已经初步体验到ExtJS的强大。这次让我们来看一下选项面板。TabPanel的效果我们在桌面应用中看到的最多，也经常会幻想要是把那样的效果移植到WEB应用中就厉害了。可如果我们使用ExtJS，这种复杂的效果只是简简单单几十行代码的问题。让我们来一起感受下TabPanel的魅力吧。
这里主要是两个文件tabs.html和tabs.js
1. tabs.html,为了达到右键菜单关闭选项面板的效果，我们配置了一个插件，这个类大家可以在ExtJS的examples里找到，实际上下面的例子也是examples里面，目录为ext-2.0.2/examples/tabs/。只是和我们上次学到的GridPanel结合起来了。注意把文本稍微汉化一下。
<!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>Insert title here</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="resources/js/ext-base.js"></script>
<script type="text/javascript" src="resources/js/ext-all.js"></script>
<script type="text/javascript" src="resources/js/TabCloseMenu.js"></script>
<script type="text/javascript" src="resources/js/tabs.js"></script>
<style>
</style>
</head>
<body>
<div id="tabs" style="margin:15px 0;"></div>
</body>
</html>
2. tabs.js,在这个JS文件中我们定义了一个TabPanel对象，它可以左右移动显示选项，还可以右键关闭自身或其它所有可关闭的选项。而在我们主选项面板中会自动加载一个放置着IFRAME的JSP，显示的内容是我们上次学过的GridPanel。这也是一个值得注意的小技巧。
Ext.onReady(function() {
Ext.QuickTips.init();// 浮动信息提示
Ext.BLANK_IMAGE_URL = 'resources/images/default/s.gif';// 替换图片文件地址为本地
var tabs = new Ext.TabPanel({
renderTo : 'tabs',//在id为tabs的地方显示
title:'功能强大的选项面板',
resizeTabs : true, // 改变选项大小
minTabWidth : 115,//每个选项的最小宽度
tabWidth : 135,//每个选项的宽度
activeTab : 0, // 当前活动面板为第一个，索引为0
enableTabScroll : true,//可以左右滑动
width : 705,//选项面板宽度
height : 450,//选项面板高度
defaults : {
autoScroll : true
},
plugins : new Ext.ux.TabCloseMenu(),
items : [{
id : 'tab1', // 设置主选项的ID标识
//xtype : 'panel',// xtype在2.0版本引入，代表组件类型,在这里默认就是panel
// contentEl : 'tabs', // 将id为tabs的html元素放置在这里
title : '主页', // 选项面板中默认第一个选项的标题
closable : false, // 不出现关闭小按钮
//自动载入内容，这里的内容是一个包含着IFRAME的JSP
autoLoad : {
url : 'tabFrame.jsp?url=grid.html',
callback : this.initSearch,
scope : this
}
}]
});
// 生成选项
var index = 0;
while (index < 7) {
addTab();
}
function addTab() {
tabs.add({
title : '新建tab' + (++index),
iconCls : 'tabs',//图标对应的CSS
html : '选项内容 ' + (index),
closable : true//
});
}
});
这里我们把tabFrame.jsp的页面也列出来，实际上非常简单：
<IFRAME SRC="<%=request.getParameter("url")%>" width="100%" height="100%" frameborder="0"></IFRAME>
效果如下：