麻烦高手帮忙，EXTJS如何实现下面的选项卡

dejiang_ren 2012-10-15 05:15:13

左侧选项卡如何实现？
Extjs

...全文

342 8 打赏收藏转发到动态举报

写回复

用AI写文章

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

太阳99 2013-01-07

打赏
举报

哥们儿，这个功能你实现了吗？，我现在也想实现一个这样的效果，不知道能否提供给我源码参考一下？

dejiang_ren 2012-10-16

打赏
举报

[Quote=引用 4 楼的回复:]

这个，没做过，不过，我估计就是用toolbar工具条来做的吧
[/Quote]
toolbar怎么放到左侧去那？

网络科技 2012-10-16

打赏
举报

这个，没做过，不过，我估计就是用toolbar工具条来做的吧

dejiang_ren 2012-10-16

打赏
举报

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>



<html>

	<head>

		<script type="text/javascript" src="jQuery1.6.1/jquery-1.6.min.js"></script>

		<script type="text/javascript" src="ext-3.4.0/adapter/ext/ext-base.js"></script>

		<script type="text/javascript" src="ext-3.4.0/ext-all.js"></script>

		<link rel="stylesheet" href="ext-3.4.0/resources/css/ext-all.css"

			type="text/css"></link>

		<script type="text/javascript" src="ext-3.4.0/gridToExcel.js"></script>

		<script type="text/javascript"

			src="ext-3.4.0/ext-lang-zh_CN-GBK-min.js"></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>'

			}]

		});

		var contentPanel2 = new Ext.TabPanel({

			height:'auto',

			region:'center',

			enableTabScroll:true,

			activeTab:0,

			items:[{

				id:'homePage2',

				title:'交互服务',

				autoScroll:true,				

				html:'<div id="div2" style="position:absolute;color:#ff0000;top:40%;left:40%;"><a>234234</a></div>'

			}]

		});

		Ext.onReady(function(){

					new Ext.Viewport({

						layout:'border', //使用border布局

						defaults:{activeItem:0},						

						items:[menuTree,contentPanel],

						applyTo:'right1'

					});

				})

		$(function(){			

			$("#r2").hide();		

		})

		

		</script>

<style type="text/css">

#main {

	width: 100%;

	height: 100%;

}



#left1 {

	float: left;

	width: 1.5%;

	height: 100%;

}



#right1,#r2 {

	float: left;

	width: 98.5%;

	height: 100%;

}

</style>

	</head>

	<body>

		<div id="main">

			<div id="left1">

				<a id="test1">测试</a>

				<a>--</a>

				<a id="test2">测试2</a>

			</div>

			<div id="right1"></div>

			<div id="r2"></div>

		</div>

	</body>

	<script type="text/javascript">

	$("#test1").click(function(){

		alert("1");

		$("#right1").show();

		$("#r2").hide();

		$(this).css("color","#ff0000");

		$("#test2").css("color","black");

	})

	$("#test2").click(function(){

		alert("2");

		$("#right1").hide();

		$("#r2").show();

		$(this).css("color","#ff0000");

		$("#test1").css("color","black");

	})	

	</script>

</html>