网站后台简单布局（上左右方式）

原创于 2010-05-16 15:37:32 发布 · 673 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #JavaScript #CSS #HTML #ViewUI

extjs 专栏收录该内容

18 篇文章

订阅专栏

本文展示了一个使用ExtJS框架实现的网站后台管理系统布局示例。该示例包括了顶部可折叠的标题面板、左侧导航菜单及中心区域的标签页。通过Ext.Viewport配置展示了如何设置各部分的样式及功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ext.onReady(function() {

			new Ext.Viewport({

						enableTabScroll : true,
						layout : "border",
						items : [{
									title : '面板',
									region : 'north',
									height : 50,
									collapsible : true,//是否可以折叠
									html : '<h3 align="center">网站后台管理</h3>'
								}, {
									title : '导航菜单',
									region : 'west',
									width : 200,
									collapsible : true,//是否可以折叠
									html : '人员管理'
								}, {
									xtype : 'tabpanel',
									region : 'center',
									
									items:[{
									title:'面板一'
									},{
									title:'面板二'
									}]

								}]
					})

		})

<%@ page language="java" contentType="text/html; charset=gb2312"
	pageEncoding="gb2312"%>
<%
	request.setAttribute("base", request.getContextPath());
%>

<html>
	<head>
		
		<title>网站后台布局</title>
		<link rel="stylesheet" type="text/css"
			href="${base}/script/ext/resources/css/ext-all.css">
		<script type="text/javascript"
			src="${base}/script/ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="${base}/script/ext/ext-all.js"></script>
		<script type="text/javascript" src="${base}/script/sample/third.js"></script>
		
	</head>
	<body>
		
		
	</body>
</html>