ext 布局

alyouge

浏览: 193356 次
性别:
来自: 大连

最近访客更多访客>>

zyf87843513

lanzier

marathon

明子健

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

EXT CSS JavaScript JSP Cache

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<base href="<%=basePath%>">

		<title>My JSP 'index.jsp' starting page</title>
		<meta http-equiv="pragma" content="no-cache">
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		<link rel="stylesheet" type="text/css" href="css/newstyle.css" />
		<link rel="stylesheet" type="text/css"
			href="ext-3.0.0/resources/css/ext-all.css" />
		<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

		<script type="text/javascript">
						
			Ext.onReady(function(){
				   new Ext.Viewport({ //实例化布局对象
				      layout:'border', //声明为border布局 
				       items:[northPanel,southPanel,centerPanel,westPanel]
				   });
				});
				
				//头布局
				var northPanel = new Ext.BoxComponent({
				     region:"north",
				     height:50,
				     el:"northDiv"
				});
				
				//底布局
				var southPanel = new Ext.BoxComponent({
				     region:"south",
				     height:20,
				     el:"southDiv"
				});
				
				//中央布局
				var centerPanel = new Ext.Panel({
				     region:'center',
				     autoScroll: true,
				     title:'中央面板'
				});
				
				//左布局
				var westPanel = new Ext.Panel({
				     region:'west',
				     id:'west-panel',
				     collapsible: true,
				     autoScroll: true,
				     width:180,
				     title:"左边面板",
				     split: true,
				     margins:"0 0 0 0",
				     layout:'accordion',
				     layoutConfig:{
				     animate:true
				     },
				     items:[{
				            title:'EXT控件使用',
				            border:false,
				            html:'<div id="tree-div" style="overflow:auto;width:100%;height:100%">1111</div>'
				        },{
				            title:'信息中心',
				            border:false,
				            html:'<div id="tree" style="overflow:auto;width:100%;height:100%">2222</div>'
				        },{
				            title:'系统设置',
				            border:false,
				            html:'<div id="tree3" style="overflow:auto;width:100%;height:100%">3333</div>'
				     }]
				});

		
		</script>
	</head>

	<body>
		<div id="northDiv">
			顶部面板
		</div>
		<div id="southDiv" align="center">
			版权所有：XXXXXXX@2009-2012
		</div>
	</body>
</html>

分享到：