`
wjt276
  • 浏览: 640749 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

Extjs3.x Struts2 -Json-plugin学习实例 -首页框架代码 05

框架jsonEXTCSSJavaScript
阅读更多

代码我就不多说了，不明白，看教程吧。我就贴出来好了。

 

其中使用的相关的文件，请见附件。

 

注意：其中的example.js是Ext例子中的，我改了一个小地方，显示效果有一点不样，大家可以看看

 

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
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>Struts2-ExtJs整合实例</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="extjs/resources/css/ext-all.css">
	<link rel="stylesheet" type="text/css" href="extjs/examples.css" />
	
	<script type="text/javascript" src="extjs/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>
	<script type="text/javascript" src="extjs/ext-lang-zh_CN.js"></script>
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
	<script type="text/javascript">
	Ext.onReady(function(){	

		Ext.BLANK_IMAGE_URL = "extjs/resources/images/default/s.gif";

		Ext.QuickTips.init();	
		
		var _top = new Ext.Panel({
						region:"north",
						//title:"标题",
						height:40,
						border:true,
						html:"LOGO",
						margins:'0 0 5 0'
					});
		var _left = new Ext.tree.TreePanel({
						region:"west",
						collapsible:true,
						title:"导航菜单",
						width:200,
						autoScroll:true,
						split:true,
						listeners:{
							click:function(_node){								
									var _url = _node.attributes.url;
									var _id = _node.id;//如果没有宝，则自动生成唯一的ID
									var _p = _center.getItem(id);//获取节点ID对应的标签面板
									if(_url){//具有URL值
										if(_p){
											//此面板已经存在，只需要激活就可以了。
											_center.setActiveTabl(_p);
										} else {
											//如果不存在，则创建新的面板，并激活
											_p = new Ext.Panel({
													title:_node.text,
													//autoLoad:{url:_url,scripts:true},
													html : "<iframe src=\"" + _url + "\" style='height:100%;width:100%;' frameborder=0></iframe>",
													closable:true,//标签上出现关闭按钮
													autoScroll:true,
													id:_id//这里一定设置
												});
											_center.add(_p);
											_center.setActiveTab(_p);
										}
									}
								}
						}
					});
		//定义根节点
		var _root = new Ext.tree.TreeNode({
						text:"根节点",
						qtip:"这是根节点"
					});
		
		var _child1 = new Ext.tree.TreeNode({
						text : "部门管理",
						url: "dept_list.jsp"
					});
		var _child2 = new Ext.tree.TreeNode({
						text : "子节点2",
						url: "http://localhost:8080/extjs001/"
					});
		var _child3 = new Ext.tree.TreeNode({
						text : "用户管理",
						url: "user_list.jsp"
					});
					
		_root.appendChild([_child1, _child2, _child3]);
		_left.setRootNode(_root);
		
		
		var _center = new Ext.TabPanel({
						region:"center",
						items:{
							id:"opt1",
							title:"默认页面",
							tabTip:"这是默认页面，不可以关闭",
							html:"叵? ? 吕在中间region:"
						},
						enableTabScroll:true
						//activeItem:0
					});
		_center.setActiveTab("opt1");
		
		var _bottom = new Ext.Panel({
						region:"south",
						title:"Information",
						collapsible:true,
						html:"版权所有，翻版必究",
						split:true,
						height:100,
						bodyStyle : "padding: 10px; font-size: 12px; text-align:center;"
					});
		var _bottom2 = new Ext.Panel({
						region:"south",
						//height:50,
						frame:false,
						autoHeight:true,
						items:new Ext.Toolbar({
							height:20,
							items:[{
								xtype:'label',
								text:'wjt276'
							}]
						})
					});
					
		var _vp = new Ext.Viewport({
					layout:"border",
					items:[{
						xtype : 'box',
						region : 'north',
						applyTo : 'header',
						height : 50,
						split : false
					},
					//_top
					_left,_center
					,_bottom2
					]
				});
		
		_left.expandAll();
	});
			</script>

	</script>
	
  </head>
  
  <body>
	<div id="header"><h1>Extjs 3.0 - Struts2整合……</h1></div>
  </body>
</html>

 

  • src.rar (203 KB)
  • 下载次数: 464
分享到：
| Extjs3.x Struts2 -Json-plugin学习实例 - ...
评论
1 楼 liangzhang0929 2014-09-04  
部门管理和用户管理的url怎么显示#，没法打开dept_list.jsp和user_list.jsp
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics