Extjs 部局问题

jackzhangyunjie 2013-04-29 09:24:40

各位大神：
刚开始接触extjs，想用extjs【使用extjs4.2】实现一个页面部局，但部局出来后，顶部的图片一直无法显示，代码如下：



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

	<head>

		<title>测试</title>

		<meta name="Generator" content="EditPlus">

		<meta name="Author" content="">

		<meta name="Keywords" content="">

		<meta name="Description" content="">

		<link rel="stylesheet" type="text/css" href="http://localhost:88/ext/resources/css/ext-all-debug.css">

		<script language="javascript" src="http://localhost:88/ext/ext-all.js"></script>

		<script language="javascript" src="http://localhost:88/ext/demo/include/js/ALLEvents.js"></script>

		<style>

		#def_top{ height:90px; width:100%;}

		#def_top01{float:left;background:url(include/images/def_top01.jpg) no-repeat;height:90px; width:786px;}

		#def_top02{float:left;background:url(include/images/def_top02.jpg) no-repeat;height:90px; width:266px;}

		#biao{margin-top:10px;height:30px; width:246px;}

		#biao a{display:block; width:92px;}

		#biao a:hover{display:block; background:url(../images/anni03.jpg) no-repeat;width:92px; }

		.t_help{width:60px;}

		.biaotu{position:absolute;margin-top:7px;margin-left:12px;}

		.biaozi{position:absolute; margin-left:32px; margin-top:7px;}

		.fl{float:left;}

		.fr{float:right;}

		.ml40{margin-left:40px;}

		#time{padding-left:12px; margin-top:10px; height:30px; width:246px;float:left;} 

		</style>

	</head>



	<body>

		<!-- use class="x-hide-display" to prevent a brief flicker of the content -->

		<div id="def_top">

			<div id="def_top01"></div>

			<div id="def_top02">

				<div id="biao">

				  <div class="fl"><a href="#"><span class="biaotu"><img src="include/images/biao01.gif" alt="帮助中心" width="18" height="17" border="0"/></span><span class="biaozi">帮助中心</span></a></div>

				  <div class="fr"><a href="javascript:exitsys();"><span class="biaotu"><img src="include/images/biao02.gif" alt="退出系统" width="18" height="17" border="0"/></span><span class="biaozi">退出系统</span></a></div>

				</div>

				<div id="time">

                    	<span>时间</span> 

                        <span>星期天</span> 

                        <span id="lbTime">21:51:11</span>

				</div>

			</div>

		</div>

		

	</body>

</html>

<script language="javascript">

	Ext.onReady(function(){

		Ext.Msg.alert("html",Ext.get("def_top").innerHTML);

		var _north = new Ext.Panel({

			region: "north",

			height: 90,

			autoScoll:true,

			html: Ext.get("def_top")

		});

		

		var _sourth_Component = new Ext.Component({

			

		});

		var _south = new Ext.Panel({

			region: 'south',

			title: '版权所有：',

			collapsible: false,

			split: false,

			height: 30

		});

		var _west = new Ext.Panel({

			region: 'west',

			collapsible: true,

			title: 'Navigation',

			width: 150

			// could use a TreePanel or AccordionLayout for navigational items

		});

		var _center = new Ext.TabPanel({

			region: 'center',

			xtype: 'tabpanel', // TabPanel itself has no title

			activeTab: 0,      // First tab active by default

			items: {

				closable:true,

				title: 'Default Tab',

				html: 'The first tab\'s content. Others may be added dynamically'

			}

		});

		Ext.create('Ext.container.Viewport', {

			layout: 'border',

			items: [_north,_west, _south,_center]

		});

	});

</script>