日期:2014-05-16 浏览次数:20436 次
代码我就不多说了,不明白,看教程吧。我就贴出来好了。
?
其中使用的相关的文件,请见附件。
?
注意:其中的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:'la