代码我就不多说了，不明白，看教程吧。我就贴出来好了。
其中使用的相关的文件，请见附件。
注意：其中的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>
分享到：
相关推荐
Struts2支持直接返回JSON结果，可以方便地与ExtJS等前端框架配合，实现异步更新页面。 综上所述，这个压缩包提供的资料可能涵盖了如何在Struts2中配置和使用Hibernate进行数据持久化，如何利用Spring进行依赖管理和...
本篇将基于"Extjs3.x入门学习"这一主题，深入探讨相关知识点。 1. **EXT_JS实用开发指南**： 这份文档可能包含了关于ExtJS的基本概念、架构以及开发流程的介绍，帮助初学者快速上手。可能包括如何创建基本的页面...
1. **组件体系**：ExtJS 3.x 提供了一个组件化的UI框架，包括各种基础和复杂组件如表格（Grid）、面板（Panel）、窗口（Window）、按钮（Button）等。这些组件可以灵活组合，创建出功能丰富的用户界面。 2. **数据...
### ExtJS 多文件上传 UploadDialog For ExtJS3.x #### 概述 在Web开发领域，特别是使用ExtJS框架进行界面设计时，文件上传功能是必不可少的一部分。然而，随着ExtJS版本的更新，原有的多文件上传组件可能不再兼容...
在我的随笔Extjs Tree + JSON + Struts2中我介绍了如何异步加载一个Extjs的树，但是很多网友留言说不能成功操作。现在我自己做了一个所有源代码的包，供大家下载。 有几点事项请大家注意 1、blogjava的文件上载要求...
这个DEMO是将这些技术集成在一起，以实现数据的创建（Create）、读取（Read）、更新（Update）和删除（Delete），即CRUD操作，并且利用Struts2的JSON插件来增强与前端ExtJS的交互。 首先，Struts2作为表现层框架，...
通过这个示例项目，开发者可以学习如何设置Struts2的Action来生成JSON，如何在ExtJS4中配置Ajax请求，以及如何解析和展示接收到的JSON数据。这有助于理解和掌握两者的集成技术，从而在实际项目中实现更高效的数据...
在本文中，我们将深入探讨如何使用ExtJS 3.x实现多文件上传功能，结合Struts2框架进行数据处理。首先，我们需要确保环境配置正确。在描述中提到，我们需要将一系列Struts2相关的库文件复制到项目的`WebContent\lib`...
使用ExtJs获取后台json格式的数据必须的七个jar包，commons-beanuti-1s-1.7.0.jar，commons-collections-3.1.jar，commons-lang-2.5.jar，commons-logging-1.0.4.jar，ezmorph-1.0.4.jar，json-lib-2.1.jar，...
本系统所用框架 struts2 spring ibatis extjs 数据库采用sqlserver 实现图书基本管理功能,对学习这些框架的人来说是难得的资源，包占空间大大我没放进来,我把包的名称都写下来了，系统没有问题，配置跑不通自己好好...
标题 "extjs 跟 struts+json" 暗示了本文将探讨如何使用ExtJS框架与Struts框架结合，通过JSON数据格式进行交互。ExtJS是一个强大的JavaScript库，用于构建富客户端Web应用程序，而Struts是Java Web开发中的一个MVC...
总结来说，这个实例展示了如何将前端的ExtJS4框架，特别是其Accordion布局和Ext.tree.Panel组件，与Servlet和Struts2后端框架集成，利用JSON进行数据交换，来创建一个动态的、交互性强的Web应用。用户可以通过折叠和...
ExtJs + Struts2 + JSON 是一种常见的前端与后端数据交互的技术组合，常用于构建富客户端应用。这里我们详细探讨一下这三个技术组件以及它们如何协同工作。 首先，ExtJs 是一个JavaScript库，用于创建复杂的、用户...
3. **Struts2 JSON 插件**：为了在 Struts2 Action 中返回 JSON 数据，需要添加 Struts2 JSON 插件到项目中。在 Action 类中，使用 `@Result(type="json")` 注解来指示返回 JSON 结果。确保配置了插件的依赖并正确...
这是一个基于ExtJS、Struts2和JSON的登录实例，适合初学者学习Web应用程序开发。这个实例演示了如何将前端的JavaScript框架ExtJS与后端的Java MVC框架Struts2结合，通过JSON进行数据交换实现用户登录功能。下面将...
【标题】"Struts2(json-plugin) + Spring2 + ExtJS2.2 开源网络硬盘系统"是一个基于Java技术栈的开源项目，它利用了Struts2框架的json-plugin插件，Spring2作为服务层管理和依赖注入框架，以及ExtJS2.2作为前端展示...
在标签"json_hibernate extjs json_struts_ext jsp_json_extjs struts2"中，"json_struts_ext"和"jsp_json_extjs"暗示了JSON在Struts2扩展和JSP与ExtJS之间的交互作用。可能有一个配置或者插件用于让Struts2的动作类...
新建一个工程struts2工程teaweb(因为现在所做的项目是一个关于茶叶，茶文化的)，导入jar包(基本的几个jar包：commons-logging-1.0.4.jar，freemarker- 2.3.8.jar，ognl-2.6.11.jar，struts2-core-2.0.10.jar，xwork-...
1. **设置Struts2的JSON插件**：在Struts2项目中，需要添加struts2-json-plugin库，然后在struts.xml配置文件中启用JSON结果类型。 2. **创建Action类**：编写处理用户请求的Action，通常会有一个方法返回一个包含...
综上所述，`@@@extjs+struts2+json plugin的例子`是一个综合运用`ExtJS`前端框架、`Struts2`后端框架以及`JSON`数据交换格式的Web应用示例。这样的组合可以构建出高性能、用户体验良好的企业级应用，同时利用`Struts...