extjs--tree与tabpannel的搭配使用
星期日, 08/31/2008 - 04:19 — bacon 本例中，左边树形菜单，提供各种功能点击，右边一个面板，随着左边节点的选择表现不同的功能内容，这是一个相当经典的布局，本文就这两个控件的搭配使用和点击左边树节点引起右边内容变化的方法作一个简单的介绍。首先看下面的具体的代码。 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TabPanel和Tree控件搭配使用</title>
<link rel="stylesheet" type="text/css" media="all" href="../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext/ext-all.js"></script>
<script type="text/javascript" src="../ext/build/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">Ext.BLANK_IMAGE_URL = '../ext/resources/images/default/s.gif';</script>
<script type="text/javascript">
//左边功能树
var menuTree = new Ext.tree.TreePanel({
region:'west',
title:'功能菜单',
width:180,
minSize:150,
maxSize:200,
split:true,
autoScroll:true,
autoHeight:false,
collapsible:true,
rootVisable:false, //不显示根节点
root:new Ext.tree.TreeNode({
id:'root',
text:'功能菜单',
draggable:false,
expanded:true
})
});
//添加第一个节点(html)
menuTree.root.appendChild(new Ext.tree.TreeNode({
id:'htmlPanel',
text:'通过html打开',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = contentPanel.getComponent(node.id);
if (!n) { //判断是否已经打开该面板
n = contentPanel.add({
'id':node.id,
'title':node.text,
closable:true, //通过html载入目标页
html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="iframe.html"></iframe>'
});
}
contentPanel.setActiveTab(n);
}
}
}));
//添加第二个节点(autoLoad)
menuTree.root.appendChild(new Ext.tree.TreeNode({
id:'autoLoadPanel',
text:'通过autoLoad打开',
listeners:{
'click':function(node, event) {
event.stopEvent();
var n = contentPanel.getComponent(node.id);
if (!n) { 判断是否已经打开该面板
n = contentPanel.add({
'id':node.id,
'title':node.text,
closable:true,
autoLoad:{url:'auto.php', scripts:true} //通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
});
}
contentPanel.setActiveTab(n);
}
}
}));
//右边具体功能面板区
var contentPanel = new Ext.TabPanel({
region:'center',
enableTabScroll:true,
activeTab:0,
items:[{
id:'homePage',
title:'首页',
autoScroll:true,
html:'<div style="position:absolute;color:#ff0000;top:40%;left:40%;">Tree控件和TabPanel控件结合功能演示</div>'
}]
});
Ext.onReady(function(){
new Ext.Viewport({
layout:'border', //使用border布局
defaults:{activeItem:0},
items:[menuTree, contentPanel]
});
});
</script>
</head>
<body>
</body>
</html>
上面代码中，构建了两个控件menuTree和contentPanel，menuTree用来显示具体功能菜单，contentPanel用来展示具体功能内容，menutTree中的节点是通过appendChild()方法手动加上去的，而且为了介绍方便，每个节点都添加了一个处理点击事件的函数，在具体应用中，还可以使用AsyncTreeNode()和TreeLoader()动态载入节点，下面着重介绍点击树节点引起功能区变化的方法，上面代码中用到了两种方法。分别如下：
（1）通过TabPanel控件的html属性配合<iframe>实现。该方法是利用 html属性中包含<iframe>的语法来调用另一个页面，具体见代码。该方法实现比较简单，只要重新编辑一个html文件即可以了，而且如果要在新生成的页面中再使用Ext的控件也比较简单，也比较好控制，只要像一个页面情况下使用就可以了，因为他本身就是一个完整的html文件。而该方法的缺点就是资源占用厉害，是三种方法中占有最厉害的，而且还有Ext的重复加载的问题（不知道Ext库中考虑这种情况了没有），另外就是新的页面载入速度也是最慢的。
（2）通过TabPanel控件的autoLoad属性实现。该方法是利用autoLoad属性，它有很多参数，其中有两个比较重要，url表示要载入的文件，scripts表示载入的文件是否含有脚本，该属性相当重要，如果在新的页面中要创建Ext控件，必须指定该参数。该方法实现较前一个复杂，因为引入的文件不是一个完整的html文件，有可能只是内容的一部分，但是资源占用较少，而且载入速度较快（它有一个载入指示），但缺点就是如果是载入的是一个单纯html文件(*.html)，在字符编码上处理很麻烦，经常出现乱码，我提供的源码中是一个PHP文件，用 PHP文件也只是一个作用，改变输出的字符编码，用html能够实现同样的功能，但会是乱码，我不知道怎样解决这个问题。
88
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
