<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>
你看看这个
这有一些关于EXT的技术文章，还有其它JS框架的文章---------------------------------------------
javascript之家,是新起的JS角本程序学习站点；
该站详细分类JS的基础,对象,极其应用；http://www.ccscript.cn/该站有多种当今流行的JS框架；
站内主打Jquery框架的基础及应用；
包括特效代码和展示特效；
站内同时提供多种其它WEB开发服务应用；JS+JQuery QQ群：12845737
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<link href="../extjs/ext-all.css" type="text/css" rel="stylesheet"/>
<script language="JavaScript" src="../extjs/prototype1.7.js">
</script>
<script language="JavaScript" src="../extjs/ext-base-debug.js">
</script>
<script language="JavaScript" src="../extjs/ext-all-debug.js">
</script>
<script language="JavaScript" src="../extjs/ext-lang-zh_CN.js">
</script>
<script type="text/javascript">
function createQQPanel(){
var loader = new Ext.tree.TreeLoader({
url: "treedata.js"
});
var win = new Ext.Window({
id: 'qqpanel',
width: 200,
height: 500,
minSize: 200,
maxSize: 400,
margins: '0 0 0 0',
layout: 'accordion',
title: '国诚QQ',
collapsible: true,
layoutConfig: {
animate: true
},
items: [
new Ext.tree.TreePanel({
id: 'im-tree',
height: 395,
autoWidth: true,
title: '在线好友',
icon: "test/image/rss_go.png",
cls: "x-btn-text-icon",
rootVisible: false,
loader: new Ext.tree.TreeLoader(),
rootVisible: false,
lines: false,
autoScroll: true,
listeners: {
dblclick: function(){
qqwin.show();
}
},
tools: [{
id: 'refresh',
on: {
click: function(){
var tree = Ext.getCmp('im-tree');
tree.body.mask('Loading', 'x-mask-loading');
tree.root.reload();
tree.root.collapse(true, false);
setTimeout(function(){ // mimic a server
// call
tree.body.unmask();
tree.root.expand(true, true);
}, 1000);
}
}
}],
root: new Ext.tree.AsyncTreeNode({
text: 'Online',
loader : loader //这里再new一个
})
//title: '我的好友',
// border: false,
// html: '<div id="myfriend" style="overflow:auto;width:100%;height:100%"></div>'
}), {
title: '我的群',
border: false,
html: '<div id="mygroup" style="overflow:auto;width:100%;height:100%"></div>'
}, {
title: '在线用户',
border: false,
html: '<div id="onlineuser" style="overflow:auto;width:100%;height:100%"></div>'
}, {
title: '最近联系人',
border: false,
html: '<div id="connector" style="overflow:auto;width:100%;height:100%"></div>'
}]
});
//我的好友
var friendRoot = new Ext.tree.TreeNode({
id: "my1",
text: "root1"
});
var friendLeaf = new Ext.tree.AsyncTreeNode({
id: "leaf1",
text: "根节点",
loader: loader
});
friendRoot.appendChild(friendLeaf);
//我的群
var groupRoot = new Ext.tree.TreeNode({
id: "my2",
text: "root2"
});
var groupLeaf = new Ext.tree.AsyncTreeNode({
id: "leaf2",
text: "根节点",
loader: loader
});
groupRoot.appendChild(groupLeaf);
//在线用户
var onlineRoot = new Ext.tree.TreeNode({
id: "my3",
text: "root3"
});
var onlineLeaf = new Ext.tree.AsyncTreeNode({
id: "leaf3",
text: "根节点",
loader: loader
});
onlineRoot.appendChild(onlineLeaf);
//最近联系人
var connectorRoot = new Ext.tree.TreeNode({
id: "my4",
text: "root4"
});
var connectorLeaf = new Ext.tree.AsyncTreeNode({
id: "leaf4",
text: "根节点",
loader: loader
});
connectorRoot.appendChild(connectorLeaf);
var tree1 = new Ext.tree.TreePanel({
renderTo: "myfriend",
root: friendRoot,
animate: true,
enableDD: false,
border: false,
rootVisible: false,
containerScroll: true
});
var tree2 = new Ext.tree.TreePanel({
renderTo: "mygroup",
root: groupRoot,
animate: true,
enableDD: false,
border: false,
rootVisible: false,
containerScroll: true
});
var tree3 = new Ext.tree.TreePanel({
renderTo: "onlineuser",
root: onlineRoot,
animate: true,
enableDD: false,
border: false,
rootVisible: false,
containerScroll: true
});
var tree4 = new Ext.tree.TreePanel({
renderTo: "connector",
root: connectorRoot,
animate: true,
enableDD: false,
border: false,
rootVisible: false,
containerScroll: true
});
win.show();
}
Ext.onReady(createQQPanel);
</script>
</head>
<body>js load:
[{
text: '我的好友',
expanded: true,
children: [{
text: 'Tom',
icon: "test/image/user.gif",
cls: "x-btn-text-icon",
leaf: true
}, {
text: 'Jane',
icon: "test/image/user_orange.png",
cls: "x-btn-text-icon",
leaf: true
}]
}, {
text: '大学同学',
expanded: true,
children: [{
text: 'Fei',
icon: "test/image/a.jpg",
cls: "x-btn-text-icon",
leaf: true
}, {
text: 'Xin',
icon: "test/image/QQ.png",
cls: "x-btn-text-icon",
leaf: true
}, {
text: 'Sun',
icon: "test/image/user_red.png",
cls: "x-btn-text-icon",
leaf: true
}]
}]