ExtJs 2.0 GridPanel+Struts2 with JSON plugin[更新代码]

最新推荐文章于 2024-11-17 11:44:11 发布
最新推荐文章于 2024-11-17 11:44:11 发布
阅读量126 收藏
点赞数
分类专栏： JavaScript 文章标签： json EXT Struts Spring Bean
extjs2.0发布了，功能有了很大提高，看了别人的extjs教程【http://203.93.254.59:8888/extdoc/html/index.html】，自己想把struts和spring框架的页面也用extjs来处理，就做了这个extjs+struts2+json plugin的例子，附件中有代码，不过没有包含库，请自行下载

struts2的json plugin的位置在：http://code.google.com/p/jsonplugin/
下载json plugin的jar包，放到/WEB-INF/lib/目录下就可以了

Spring + Struts + JPA的项目结构如其他例子中的一致
首先是web.xml
xml 代码
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <web-app id="WebApp_ID" version="2.4"  
  3.     xmlns="http://java.sun.com/xml/ns/j2ee"  
  4.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  5.     xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  
  6.     <display-name>quickstart</display-name>  
  7.     <filter>  
  8.         <filter-name>struts2</filter-name>  
  9.         <filter-class>  
  10.             org.apache.struts2.dispatcher.FilterDispatcher  
  11.         </filter-class>  
  12.     </filter>  
  13.     <filter>  
  14.         <filter-name>jpaFilter</filter-name>  
  15.         <filter-class>  
  16.             org.springframework.orm.jpa.support.OpenEntityManagerInViewFilter  
  17.         </filter-class>  
  18.         <init-param>  
  19.             <param-name>entityManagerFactory</param-name>  
  20.             <param-value>entityManagerFactory</param-value>  
  21.         </init-param>  
  22.     </filter>  
  23.     <filter-mapping>  
  24.         <filter-name>jpaFilter</filter-name>  
  25.         <url-pattern>*.action</url-pattern>  
  26.     </filter-mapping>  
  27.     <filter-mapping>  
  28.         <filter-name>struts2</filter-name>  
  29.         <url-pattern>/*</url-pattern>  
  30.     </filter-mapping>  
  31.     <welcome-file-list>  
  32.         <welcome-file>index.jsp</welcome-file>  
  33.     </welcome-file-list>  
  34.     <listener>  
  35.         <listener-class>  
  36.             org.springframework.web.context.ContextLoaderListener  
  37.         </listener-class>  
  38.     </listener>  
  39. </web-app>  

加入 jpaFilter，是为了不让hibernate的session过早关闭，因为有的action会通过ajax动态调用。
下面是struts.xml，注意struts.xml需要放在源代码目录下面：

xml 代码
 
  1. <?xml version="1.0" encoding="UTF-8" ?>  
  2. <!DOCTYPE struts PUBLIC  
  3.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
  4.     "http://struts.apache.org/dtds/struts-2.0.dtd">  
  5. <struts>  
  6.     <constant name="struts.objectFactory" value="spring" />  
  7.     <constant name="struts.devMode" value="true" />  
  8.     <constant name="struts.i18n.encoding" value="UTF-8"/>  
  9.     <package name="person" extends="json-default">  
  10.         <action name="list" method="execute" class="personaction">  
  11.             <result type="json"/>  
  12.         </action>         
  13.     </package>  
  14. </struts>  

这里注意， struts.objectFactory告诉struts所有的action都到spring的上下文里面去找，另外还需要注意，我们自己的包要继承自json-default，这样才可以在result的type属性中使用json。
下面是spring的配置文件applicationContext.xml：
xml 代码
 
  1. <?xml version="1.0" encoding="UTF-8"?>  
  2. <beans xmlns="http://www.springframework.org/schema/beans"  
  3.     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
  4.     xmlns:aop="http://www.springframework.org/schema/aop"  
  5.     xmlns:tx="http://www.springframework.org/schema/tx"  
  6.     xsi:schemaLocation="  
  7.     http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd  
  8.     http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.0.xsd  
  9.     http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.0.xsd">  
  10.     <bean  
  11.         class="org.springframework.orm.jpa.support.PersistenceAnnotationBeanPostProcessor" />  
  12.     <bean id="entityManagerFactory"  
  13.         class="org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean">  
  14.         <property name="dataSource" ref="dataSource" />  
  15.         <property name="jpaVendorAdapter">  
  16.             <bean  
  17.                 class="org.springframework.orm.jpa.vendor.HibernateJpaVendorAdapter">  
  18.                 <property name="database" value="MYSQL" />  
  19.                 <property name="showSql" value="true" />  
  20.             </bean>  
  21.         </property>  
  22.     </bean>  
  23.     <bean id="dataSource"  
  24.         class="org.springframework.jdbc.datasource.DriverManagerDataSource">  
  25.         <property name="driverClassName" value="com.mysql.jdbc.Driver" />  
  26.         <property name="url" value="jdbc:mysql://localhost/extjs" />  
  27.         <property name="username" value="root" />  
  28.         <property name="password" value="" />  
  29.     </bean>  
  30.   
  31.       
  32.     <bean id="transactionManager"  
  33.         class="org.springframework.orm.jpa.JpaTransactionManager">  
  34.         <property name="entityManagerFactory"  
  35.             ref="entityManagerFactory" />  
  36.     </bean>  
  37.     <tx:annotation-driven transaction-manager="transactionManager" />  
  38.     <!--Service 开始 -->  
  39.     <bean id="personService" class="com.myext.service.impl.PersonServiceJpaImpl"/>  
  40.     <bean id="personaction" class="com.myext.action.PersonPageAction">  
  41.         <property name="person" ref="personService"/>  
  42.     </bean>  
  43. </beans>  

这里的bean personaction和strutx.xml中的action class一致就可以了，下面是代码：
action：
java 代码
  1. package com.myext.action;
  3. import java.util.ArrayList;
  4. import java.util.List;
  6. import com.myext.service.PersonService;
  8. public class PersonPageAction {
  9. private int limit=10;
  10. private int start=0;
  11. private PersonService person;
  12. private int total=0;
  13. private List persons = new ArrayList();
  14. private boolean success=true;
  15. public boolean getSuccess(){
  16. return this.success;
  17. }
  18. public void setLimit(int limit) {
  19. this.limit = limit;
  20. }
  22. public void setStart(int start) {
  23. this.start = start;
  24. }
  27. public void setPerson(PersonService person) {
  28. this.person = person;
  29. }
  31. public int getTotal() {
  32. return total;
  33. }
  35. public void setTotal(int total) {
  36. this.total = total;
  37. }
  39. public List getPersons() {
  40. return persons;
  41. }
  43. public void setPersons(List persons) {
  44. this.persons = persons;
  45. }
  47. public String execute(){
  48. this.total = person.getTotal();
  49. this.persons = person.getPage(this.start, this.limit);
  50. return "success";
  51. }
  52. }
service：
java 代码
  1. package com.myext.service.impl;
  3. import java.util.List;
  5. import javax.persistence.EntityManager;
  6. import javax.persistence.PersistenceContext;
  7. import javax.persistence.Query;
  9. import com.myext.model.Person;
  10. import com.myext.service.PersonService;
  12. public class PersonServiceJpaImpl implements PersonService {
  13. private EntityManager em;
  14. private static String poname = Person.class.getName();
  15. @PersistenceContext
  16. public void setEntityManager(EntityManager em){
  17. this.em = em;
  18. }
  19. @SuppressWarnings("unchecked")
  20. @Override
  21. public List getPage( int start, int limit) {
  22. Query q = this.em.createQuery("from " + poname );
  23. q.setFirstResult(start);
  24. q.setMaxResults(limit);
  25. return q.getResultList();
  26. }
  27. @Override
  28. public int getTotal() {
  29. return this.em.createQuery("from " + poname).getResultList().size();
  30. }
  32. }
页面的代码：
xml 代码
  1. xml version="1.0" encoding="UTF-8" ?>
  2. <%@ page language="java" contentType="text/html; charset=UTF-8"
  3. pageEncoding="UTF-8"%>
  4. >
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  8. <title>Grid3title>
  9. <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
  11. <script type="text/javascript" src="extjs/adapter/ext/ext-base.js">script>
  13. <script type="text/javascript" src="extjs/ext-all.js">script>
  14. <script type="text/javascript" src="extjs/ext-lang-zh_CN.js">script>
  15. head>
  16. <body>
  17. <script type="text/javascript" src="grid3.js">script>
  18. <div id="grid3" >
  19. div>
  20. body>
  21. html>
grid3.js代码
js 代码
  1. /**
  2. * @author fox
  3. */
  4. Ext.onReady(function(){
  5. Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
  6. Ext.QuickTips.init();
  7. var sm = new Ext.grid.CheckboxSelectionModel(); //CheckBox选择列
  8. var cm = new Ext.grid.ColumnModel([
  9. new Ext.grid.RowNumberer(), //行号列
  10. sm,
  11. {header:'编号',dataIndex:'id'},
  12. {header:'性别',dataIndex:'sex',renderer:function(value){
  13. if(value=='male'){
  14. return "男";
  15. }else{
  16. return "女";
  17. }
  18. }}, //增加性别，自定义renderer，即显示的样式，可以加html代码，来显示图片等。
  19. {header:'名称',dataIndex:'name'},
  20. {header:'描述',dataIndex:'descn'}
  21. ]);
  24. var ds = new Ext.data.Store({
  25. proxy: new Ext.data.HttpProxy({url:'list.action'}),//调用的动作
  26. reader: new Ext.data.JsonReader({
  27. totalProperty: 'total',
  28. root: 'persons',
  29. successProperty :'success'
  30. }, [
  31. {name: 'id',mapping:'id',type:'int'},
  32. {name: 'sex',mapping:'sex',type:'string'},
  33. {name: 'name',mapping:'name',type:'string'},
  34. {name: 'descn',mapping:'descn',type:'string'} //列的映射
  35. ])
  36. });
  39. var grid = new Ext.grid.GridPanel({
  40. el: 'grid3',
  41. ds: ds,
  42. sm: sm,
  43. cm: cm,
  44. width:700,
  45. height:280,
  46. bbar: new Ext.PagingToolbar({
  47. pageSize: 10,
  48. store: ds,
  49. displayInfo: true,
  50. displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
  51. emptyMsg: "没有记录"
  52. }) //页脚显示分页
  53. });
  54. //el:指定html元素用于显示grid
  55. grid.render();//渲染表格
  56. ds.load({params:{start:0, limit:10}}); //加载数据
  57. });
注意，这里的gridpanel一定要设置高度，否则数据是显示不出来的。
最后启动tomcat，在浏览器里输入http://localhost:8080/extjs/grid3.jsp,就可以看到效果
zjnbshifox
关注
专栏目录
Ext2.0 学习系列 ------- Ext Grid （二）
peak
01-22 125
Ext2.0 学习系列(转) ------- Ext Grid （一）中已经介绍了静态的Grid如何显示，本章要简单的讲述一下，如何使用Struts和JSON，在Grid上显示数据。 JSON （JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON 是JavaScript 原生格式，这意味着在JavaScript 中处理JSON 数据不需要任何特...
Ext.grid.Panel加载JSON数据
Mars的专栏
03-11 4617
Ext.onReady(function () { //建立一个store要使用的Model Ext.define("User", { extend: "Ext.data.Model", fields: [ { name: "firstName", type: "string" }, { name: "
extjs+struts2+spring例子
weixin_34211761的博客
05-17 119
struts2的json plugin的位置在：http://code.google.com/p/jsonplugin/ 下载json plugin的jar包，放到/WEB-INF/lib/目录下就可以了 Spring + Struts + JPA的项目结构如其他例子中的一致 首先是web.xml xml 代码 <?xml version...
struts2 使用json与extjs进行数据交互
csnewdn的专栏
11-07 840
http://blog.csdn.net/dys1990/article/details/6653140 struts2 使用json与extjs进行数据交互 首先推荐一个很强大的EXTJS4学习论坛--USPCAT http://pcat.s23-213.myverydz.com/?fromuid=1585 在默认时，标签的type属性值是“dispatcher”（实际上就是转发
@@@extjs+struts2+json plugin的例子
10-22
综上所述，`@@@extjs+struts2+json plugin的例子`是一个综合运用`ExtJS`前端框架、`Struts2`后端框架以及`JSON`数据交换格式的Web应用示例。这样的组合可以构建出高性能、用户体验良好的企业级应用，同时利用`Struts...
Extjs2.02 Gridpanel
01-24
Extjs2.02 Gridpanel加载本地数组资源的实例，思路相当清晰。对初学者很有用
Extjs+hibernate+struts2+spring案例大全源代码
10-08
这是一个基于Java技术栈的Web应用开发案例集合，涵盖了ExtJS前端框架、Hibernate持久化框架、Struts2 MVC框架以及Spring框架的综合运用。这个源代码库对于初学者来说是一个宝贵的资源，可以帮助他们理解和掌握这些...
简单分析数据被序列化后的内容
最新发布
2301_76723322的博客
11-17 402
JSON 字符串是以UTF-8 编码的字节数组表示的。Go 的[]byte类型可以帮助我们逐个访问 JSON 字符串中的每个字节。通过解析字节数组，我们可以看到 JSON 的每个字符（包括汉字）如何被编码和存储。这行代码使用fmt.Printf格式化输出字节数组内容，按索引字节值字符表示三列对齐显示。通过 %-10d和 %-15q的格式控制，可以确保输出整齐，便于阅读和分析。%q格式化符号特别适合显示字符串和字符的字面值，同时处理 Unicode 和转义字符。
24.11.13 Javascript3
2401_87910368的博客
11-13 633
2.渲染(通过特定api 把元素显示到页面中的某个为止 挂载到dom树上)注意:js中随机数需要手动计算 通过取整 扩倍 移动区间 得到需要的随机数。两个步骤 1.生成出元素(虚拟dom结构 可以设置属性 页面上没有)//4数组遍历 //Array可对元素属性进行调整。//innerHTML可以解析html标签。JSON javascript对象标记。js中会table描述为数组(了解)js操作时 需要先获取元素。原生js动态操作(了解)同样可以使用简化操作。//2.数组中的内容。//3.数组常用方法。
vscode文件重定向输入输出（竞赛向）
Landing_on_Mars的博客
11-14 417
这种方式可以避免在代码中硬编码路径，保持代码简洁，也能方便调试和测试。如果希望在调试时使用文件重定向，可以修改 launch.json。在使用 VS Code 调试或运行 C++ 程序时，可以使用。来方便地从文件读取输入并将输出写入文件，而不是修改代码中的。中配置文件重定向，简化运行过程。假设你的 C++ 程序文件为。
python json详解
stephenbruce的博客
11-15 752
Python 的 json 模块提供了强大的功能来处理 JSON 数据。通过 json.dump() 和 json.dumps()，你可以将 Python 对象序列化为 JSON 格式；通过 json.load() 和 json.loads()，你可以将 JSON 数据反序列化为 Python 对象。利用这些功能，你可以轻松地在 Python 程序中处理 JSON 数据。
自定义反序列化过程
半夏陌殇Earth
11-14 274
需求：student对象中name属性，序列化时将该属性映射为stuname，反序列化时将 Json中的NAME键值对映射到name属性中。
新功能介绍​
weixin_43715205的博客
11-13 330
近期基于客户实际需求，基于现有的数合建模平台，开发了基于API接口的数据接入功能，旨在帮助您轻松地将各种API接口的数据结构化并存储到数据库中。支持主子表结构，能够自动生成数据库结构，并提供直观的界面编辑功能，让您能够轻松管理表名称和外键关系。能够处理各种JSON格式的数据，无论您的API返回的是简单的键值对还是复杂的嵌套结构，我们都能够将其有效地存储到数据库中。支持主子表结构，允许您定义复杂的数据关系，并通过外键约束来维护这些关系，确保数据的一致性和完整性。2. 数据结构化存储​。5. 界面编辑功能​。
swagger （一）导出iOS包
Wondgirl的极客世界
11-15 316
swagger2.7.2导出iOS端代码
02-SpringBoot3Web开发
小钟不想敲代码
11-14 864
02-SpringBoot3 Web开发
微信小程序开发，仿小红书瀑布流实现
商城app+新闻app+备忘录记事本app视频教程在某站【浩宇软件开发】
11-14 970
lib: 3.6.4)解决方案：这个报错在控制台提示的很明显了，需要在.json文件中设置。温馨提示： 仅支持作为。即可 ，如下图所示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值