ext3.2 布局 树

迟到的企鹅 发布于 2012/12/25 10:19
阅读 718
收藏 1

刚接触extjs 请大家指点一下。

extjs3.2布局时,树导航的内容显示不了

 

项目引进ext-all.css    ext-all.js  ext-base.js 以及images所有图片,

index.jsp页面

<link rel="stylesheet" type="text/css" href="extjs3.2/ext-all.css">
<script type="text/javascript" src="extjs3.2/ext-base.js"></script>
<script type="text/javascript" src="extjs3.2/ext-all.js"></script>
<script type="text/javascript" src="js/index.js"></script>

index.js

Ext.onReady(function(){
	var root=new Ext.tree.TreeNode('系统说明');
	var node1=new Ext.tree.TreeNode({
		text:'书籍类型维护',
		url:'one.jsp'	 //用树做导航时,直接链接到one.jsp 和 two.jsp
	});
	var node2=new Ext.tree.TreeNode({
		text:'书籍维护',
		url:'two.jsp'
		//url:'bookList.jsp'	
	});
	root.appendChild(node1);
	root.appendChild(node2);
	var menu=new Ext.tree.TreePanel({
		root:root,
		border:false,
		listeners:{
			click:function(node,e){
				mainPanel.load({
					url:node.attributes.url,
					callback:function(){
					mainPanel.setTitle(node.text);
				},	
				scripts:true
				});
			}
		}
	});	
	new Ext.Viewport({
		layout:'border',
		items:[{
			title:'图书管理',
			collapsible:true,
			html:'图书管理',
			region:'north',
			height:100
		},{
			title:'功能菜单',
			items:menu,
			collapsible:true,
			split:true,   //导航可拖大小
			region:'west',
			width:150
		},{
			title:'正文',
			collapsible:true,
			region:'center',
			html:'图书的添删查改',
			id:'mainContent'
		}]
	});
	var mainPanel=Ext.getCmp('mainContent');
});
用树做导航时,直接链接到One.jsp和two.jsp

以下是one.jsp

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'one.jsp' starting page</title>    
	<link rel="stylesheet" type="text/css" href="extjs3.2/ext-all.css">
	<script type="text/javascript" src="extjs3.2/ext-base.js"></script>
	<script type="text/javascript" src="extjs3.2/ext-all.js"></script>
	<script type="text/javascript">
	Ext.onReady(function(){      //ext显示不了
	var panel=new Ext.Panel({
	renderTo:'one',
		title:"title",
		html:"内容one",
		width:200,
		height:100,
		collapsible:true		
	});
});
	</script>
  </head> 
  <body>
    one <br>    //正常显示
    <div id="one"></div>
  </body>
</html>
结果:网页运行时,one.jsp显示不了里面的extjs的代码,可以显示html代码

加载中
返回顶部
顶部