日期:2014-05-16  浏览次数:20350 次

Extjs复习笔记(十)-- 网页主框架

主界面的雏形:


?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主窗口</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="../ext-all.js">
</script>
<script type="text/javascript">
Ext.onReady(function(){
			
    var viewport = new Ext.Viewport({
        layout:'border',
        items:[
            {
				region: 'north',//指定子面板所在区域为north
				//collapsible: true,
				contentEl:'top-logo',
				height: 70
            },
            {
                region:'west',
                width:195,
				collapsible: true,
				autoScroll:true
            },
            {
                region:'center',
				contentEl : 'aboutDiv',
				collapsible: true,
				autoScroll:true
            }
		]
	})
});
</script>
<style type="text/css">
	
	#top-logo{
		height:70px;	
		font: normal 13px arial, tahoma, sans-serif;
		background:url(/clx_tm/images/logo-bg.jpg) repeat-x;
	}
	#logo{
		background-color:#9ad8ef;
		float:left;
		width:65%;
		height:70px;
		padding-top:10px;
		padding-left:10px;
		margin:0px;
	}
	#banner{
		background-color:#9ad8ef;
		float:left;
		width:33%;
		height:70px;
		line-height:30px;
		text-align:right;
		padding-top:10px;
		padding-left:10px;
		margin:0px;
	
	}
</style>
</head>

<body bgcolor="#9ad8ef">
	 <div id='top-logo'>
	  <div id='logo'><img src="images/logo.gif" /></div>
	  <div id='banner'><img src="images/ico_3.gif"/> <a href="#" onclick="return confirm('确定要退出吗?')">注销</a>&nbsp;<img src="images/ico_9.gif" /><a href="#"> 关于</a><div id="nowTime"></div></div>
	</div>
	<div id='aboutDiv' style='height:500;width:100%;text-align:center;line-height:300px'>
	   <img  src="images/book_bg.jpg"/>
	</div>
</body>
</html>