Ext.js简单布局加静态树示例

最新推荐文章于 2019-04-18 18:43:23 发布
chuhui1765
最新推荐文章于 2019-04-18 18:43:23 发布
阅读量157
点赞数
原文链接：https://my.oschina.net/Rayn/blog/180775
版权
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
	<HEAD>
		<TITLE>Ajax</TITLE>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	
		<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
		
		<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
		
		
		<link rel="stylesheet" type="text/css" href="portal.css" />
		
		<script type="text/javascript" src="portal.js"></script>
		<script type="text/javascript" src="myPortal/myPortal.js"></script>
		<script type="text/javascript" src="myPortal/PortalDropZone.js"></script>
		<script type="text/javascript" src="myPortal/PortalColumn.js"></script>
		<script type="text/javascript" src="myPortal/PortalPanel.js"></script>
		<script type="text/javascript" src="viewer/FeedPanel.js"></script>
		
		<script type="text/javascript">
			function exitLogin()
			{
				Ext.MessageBox.confirm("提示","是否要退出？",function(status){
					if('yes'==status)
					{
						location.href="http://www.oschina.net";
					//location.replace("http://www.baidu.com");
					}
				});
			}
		
			Ext.onReady(function(){
				var toolbar = new Ext.toolbar.Toolbar({
					//renderTo:'toolbar',
					autoWidth:true,
					frame:true,
				});

				toolbar.add([{
					xtype:'tbspacer',width:30
				},{
					text:'系统管理', iconCls:'1.gif',handler:function(){
						toolbar.enable();
					}
				},'-',{
					text:'系统帮助', icon:'1.gif',handler:function(){
						toolbar.enable();
					}
				},{
					text:'不知道了', iconCls:'1.gif',handler:function(){
						toolbar.disable();
					}
				},{
					xtype:'textfield',
					label:'我的Label',
					hideLabel:true,
					width:150
				},'->',
				'<a href="#">管理员</a>&nbsp;&nbsp;您好，欢迎登陆!!!',
				,{
					xtype:'tbspacer',width:10
				},{
					label:'系统退出',
					icon:'close.gif',handler:exitLogin
				},{
					xtype:'tbspacer',width:50
				}]);

				var pnNorth=new Ext.Panel({
					id:'pnNorth',
					autoWidth:true,
					heigth:100,
					frame:true,
					//split:true,//显示分隔条
					region:'north',
					bbar: toolbar,
					html:'<h1 style="margin-left:1cm;font:normal 25px tahoma, arial, sans-serif, 宋体;">XXXXXXXXX平台</h1>'
				});
				
				var pnBottom = new Ext.Panel({
					id:'pnBottom',
					height:25,
					autoWidth:true,
					split:true,//显示分隔条
					frame:true,
					region:'south',
					//html:'<div><div style="float:left;margin:5px;font:normal 12px tahoma, arial, sans-serif, 宋体;">Power By: <span style="color:blue">XXXXXXXXXX平台</span>&nbsp;</div><div style="float:right;margin:5px;font:normal 12px tahoma, arial, sans-serif, 宋体;"> 版权所有：Rayn</div></div>'
					//html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'
					html:'<div align="center">Power By: <span style="color:blue">XXXXXXXX平台</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;版权所有：Rayn&nbsp;&nbsp;E-mail:<span style="color:red">liuwei412552703@163.com</span></div>'
				});
				
				var tree = Ext.create('Ext.tree.Panel', {
					title: '人员用户管理',
					icon:'1.gif',
					dockedItems: [{
						xtype: 'toolbar' ,
						items: [
							{ xtype: 'button', text: '修改' },
							{ xtype: 'button', text: '更新' },
							{ xtype: 'button', text: '确定' }							
						]
					}],
					fbar: [
					  { type: 'button', text: '你要弄啥？' }
					],
					lbar: [{ xtype: 'button', text: '靠侧栏按钮' }],
					root:{
						text: '人员用户管理',
						expanded: true,
						icon:'1.gif',
						scope:this,
						children: [{
							id:'r1',
							text: '管理员',
							icon:'1.gif',
							url:'http://www.oschina.net',
							leaf: true
						}, {
							text: '系统用户',
							icon:'1.gif',
							id:'r2',
							url:'http://www.baidu.com',
							leaf: true
							
						}, {
							text: '角色管理',
							children: [{
								id:'r3',
								text: '研发部门',
								leaf: true
							},{
								id:'r4',
								text: '测试部门',
								leaf: true
							},{
								id:'r5',
								text: '销售部门',
								leaf: true
							},{
								text: '运行保障部门',
								leaf: true
							}]
						},{
							text:'用户日志管理',
							iconCls:'',
							children:[{
								text:'操作日志',
								leaf:true
							},{
								text:'操作日志',
								leaf:true
							},{
								text:'操作日志',
								leaf:true
							}]
						}]
					}
				});
				
				tree.addListener('itemclick',function (view, record, item, index, e){
					//alert(record.raw.url + "------" + record.raw.id + "------" + record.raw.leaf);
					var url = 'http://www.baidu.com';
					
					if(record.raw.leaf){
						e.stopEvent();
						var n = pnCenter.getComponent(item.id + 1);
						
						if(!n) {
							n = pnCenter.add({
								id:item.id + 1,					//item.id + 1, //pnCenter.items.length + 1,
								title: record.raw.text,
								closable:true,
								loadMask:true,
								icon:record.raw.icon,
								autoWidth:true,
								autoHeight:true,
								html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="'+ url + '" />'
								}).show();
						}
						pnCenter.setActiveTab(n);
					 }
				});
				
				
				//设置树的点击事件
				function treeClick(node,e) {
					 if(node.isLeaf()){
						e.stopEvent();
						var n = pnCenter.getComponent(node.id);
						if (!n) {
							var n = pnCenter.add({
								'id' : node.id,
								'title' : node.text,
								closable:true,
								html : '我是"'+node.text+'"'
								});
						}
						pnCenter.setActiveTab(n);
					 }
				}
				
				var a = Ext.create('Ext.panel.Panel',{
					id:'a',
					title:'菜单管理',
					icon:'1.gif',
					width:'190',
					split: true,
					minWidth: 130,
					align:'center',
					collapsible: true,
					floatable: false,
					layout: 'accordion',
					animCollapse: true,
					items:[{
						title: 'Sencha Blog',
						image:'1.gif',
						url: 'http://feeds.feedburner.com/extblog'
					},{
						title: 'Sencha Blog',
						url: 'http://feeds.feedburner.com/extblog'
					},{
						title: 'Sencha Blog',
						url: 'http://feeds.feedburner.com/extblog'
					}],
					listeners: {
						scope: this,
						'click':function(){
							alert('liu');
						}
					}
				});
				
				var pnWest=new Ext.Panel({
					id:'pnWest',
					title:'菜单项',
					width:200,
					margins:'0 5 0 3',
					heigth:'fit',
					split:true,//显示分隔条
					region:'west',
					layout:'accordion',
					collapsible:true,
					items: [
						 tree
						,a
						,{
							title:'系统设置',
							border:false,
							icon:'1.gif',
							html:'<div id="tree3" style="overflow:auto;width:100%;height:100%"></div>'
						}]					
				});
								
				var pnSub1=new Ext.Panel({
					height:300,
					columnWidth:.3,
					html:'这是子panle1'
				});
				var pnSub2=new Ext.Panel({
					height:300,
					columnWidth:.7,
					html:'这是子panle2'
				});
				var pn=new Ext.Panel({
					id:'pn',
					title:'Tab标签测试拆分',
					icon:'1.gif',
					width:800,
					layout:'column',
					authHeight:true,
					items:[
						pnSub1,
						pnSub2
					]
				});

				var pnCenter=new Ext.TabPanel({
					region:'center',
					activeTab:0,
					deferredRender:false,
					resizeTabs:true, // turn on tab resizing
					items:[{
							title:'Tab标签测试1',
							authHeight:true,
							closable:false,//是否可关闭
							html:'这里显示所收邮件。。。'
						},{
							title:'Tab标签测试2',
							authHeight:true,
							closable:true,//是否可关闭
							loadMask:true,
							html:'<iframe scrolling="auto" frameborder="0" width="100%" height="100%" src="http://www.baidu.com"></iframe>'
						},
							pn
						]
				});
				
				
				var vp=new Ext.Viewport({
					layout:"border",
					renderTo:'app-msg',
					layoutConfig:{
						animate:true
					},
					items:[
						pnNorth,
						pnWest,
						pnCenter,
						pnBottom
					]
				});


			});


		</script>
	</HEAD>
	<BODY>
		<span id="app-msg" style="display:none;"></span>
	</BODY>
</HTML>
Ext.js布局加树以及TabPanel示例
转载于:https://my.oschina.net/Rayn/blog/180775