`
gstarwd
  • 浏览: 1538717 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

ExtJs + Struts2 + JSON 程序总结

阅读更多
最近一直都在看EXTJS的东西,然后自己实践了下,界面倒是 蛮漂亮的,但是一旦涉及到与服务器端进行数据互动麻烦就出来了,本来下了个例子确发现是用DWR的,觉得我既然用了STRUTS2作为MVC的框架,我觉 得这个框架还是很不错的,觉得还是把EXTJS整合到一起更好些,找了相关的资料,跟着前辈做了下例子,发现完全不是那么回事,只好自己慢慢摸索,终于把 数据交互的问题解决了,所以记录之以便查阅!
       还是从底层开始说吧,拿最经典的例子来解说吧,订单和客户的关系显然是n:1的关系,我hibernate不是用的声明方式所以就用的xml方式做的那么相应的hbm.xml文件如下:
       ORDER.XML 
<? xml version="1.0" ?>
<! DOCTYPE hibernate-mapping PUBLIC 
    "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
    "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd"
>  
       
< hibernate-mapping >
       
< class  name ="com.model.Order"   table ="t_order"  lazy ="false" >
           
< id  name ="orderId"  column ="OrderId" >
               
< generator  class ="uuid.hex"   />
           
</ id >
           
< property  name ="name"  column ="Name"  type ="string"   />
           
< property  name ="desn"  column ="Desn"  type ="string" />
           
< property  name ="booktime"  column ="Booktime"  type ="string" />
           
< property  name ="company"  column ="Company"   />
           
< many-to-one  lazy ="false"  name ="custom"  column ="CustomId"  class ="com.model.Customer"   />
       
</ class >
   
</ hibernate-mapping >

        CUSTOM.XML

<? xml version="1.0" ?>
<! DOCTYPE hibernate-mapping PUBLIC 
    "-//Hibernate/Hibernate Mapping DTD 3.0//EN"
    "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd"
>  
   
< hibernate-mapping >
       
< class  name ="com.model.Custom"   table ="t_custom"  lazy ="false" >
           
< id  name ="customId"  column ="Id" >
               
< generator  class ="uuid.hex"   />
           
</ id >
           
< property  name ="customName"  column ="Name"  type ="string"   />
       
</ class >
   
</ hibernate-mapping >


        相应的MODEL的JAVA我就不写了,只是做个例子而已,呵呵!相应的DAO SERVICE 我都不写了,这个不是我讨论的范围,那么我想在页面上显示所有的信息,那么在OrderAction中我定义了一个getAllOrder的方法,然后通 过struts2配置action让EXTJS与服务器数据进行数据交互。因为EXTJS是支持JSON数据格式的,所以我用了JSON- LIB(json-lib-2.2.1-jdk15.jar)这个东东,它还依赖另外的3个包:commons-beanutils- 1.7.1-20061106.jar,commons-collections-3.2.1.jar,ezmorph-1.0.4.jar。好了万事俱 备只欠东风了,我的getAllOrder方法如下:

import  java.text.DateFormat;
import  java.text.ParseException;
import  java.text.SimpleDateFormat;
import  java.util.Date;
import  java.util.List;
import  net.sf.json. * ;
// 具体的那些serivce的包引入我就省略了
public   class  OrderAction  extends  ActionSupport
{
   
private   static   final   long  serialVersionUID  =   - 5092865658281004791L ;
    
private  IOrderSerivce orderSerivce;
    
private  String jsonString; // 这个就是中转站了
     private  List < Order >  orderList; // 这个是数据链表
     private   int  totalCount; // 这个是extjs用来分页
      public  String getJsonString()
    
{
        
return  jsonString;
    }

     
public   void  setJsonString(String jsonString)
    
{
        
this .jsonString  =  jsonString;
    }

    
public   int  getTotalCount()
    
{
        
return  totalCount;
    }

    
public   void  setTotalCount( int  totalCount)
    
{
        
this .totalCount  =  totalCount;
    }

    
public  List < Air >  getOrderList()
    
{
        
return  orderList;
    }

    
public   void  setOrderList(List < Order >  orderList)
    
{
        
this .orderList  =  orderList;
    }

    
public   void  setOrderSerivce(OrderSerivce orderSerivce)
    
{
        
this .orderSerivce  =  orderSerivce;
    }

    
public  String getAllAir()
    
{
        orderList 
=  orderSerivce.getOrderAll();
        
this .setTotalCount(orderList.size());
        
        JSONArray array 
=  JSONArray.fromObject(orderList);
// 哈哈,就是在这里进行转换的
         this .jsonString  =   " {totalCount: " + this .getTotalCount() + " ,results: " + array.toString() + " } " ;
    
return  SUCCESS;
    }

}

        接下来再是什么,哦,是的,应该是STRUTS的配置了,哈哈

<! DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd"
>

< struts >
      
< package  name ="order"  extends ="struts-default" >
< action  name ="getAllOrder"  class ="orderAction"  method ="getAllOrder" >
            
< result  name ="success"   > jsondata.jsp </ result >
        
</ action >
      
</ package >
</ struts >

        好的,看到jsondata.jsp了么,这里就是要放数据的地方,看看是什么吧!

<% @ page language = " java "  import = " java.util.* "  pageEncoding = " utf-8 " %>
<% @ taglib prefix = " s "  uri = " /struts-tags "   %>
< s:property  value ="jsonString"  escape ="false"   />

        是的,就是这么简单的一个代码!终于要到前台了,该露脸了,呵呵,前台代码最关键的也就是JS代码,那么我也就只贴JS了相信大家看过后都会自己弄清楚的!

/**/ /*
 * Ext JS Library 2.1
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 
*/



Ext.onReady(
function () {
    Ext.BLANK_IMAGE_URL 
=  'ext / resources / images / default / s.gif'; 
    Ext.QuickTips.init();
    
var  xg  =  Ext.grid;
    
// 这里就是设置解析格式的地方,一定要和你的Model一样,要不然可是什么都得不到哦~~~~
     var  rd  =   new  Ext.data.JsonReader( {
                
// 总记录数
                totalProperty: 'totalCount', 
               
// 哪儿是数据的头,可以看action里面是怎么定义数据格式的,这里就是如何解析的           
                    root: 'results', 

                 // 有那些字段呢?
                fields:[
                         
{name:'orderId'} ,
                                      {name:'desn'},
                         
{name:'booktime'} ,
                         
{name:'company'} ,
                         
{name:'name'} ,
                            
// 这里就是对custom对象进行映射的地方                        
                                      {name:'customId' ,mapping:'custom.customId'},
                          {name:'customName',mapping:'custom.customName'}
                         ]
                                     }
);
     
var  ds  =   new  Ext.data.Store( {
                                    proxy: 
new  Ext.data.HttpProxy
(
{url: 'getAllOrder.action',method:'POST'} ), // Url很关键,我就是因为没配好这个,POST方法很重要,你可以省略,让你看下错误也行的!耽误了一大堆时间!
                                    reader:rd
                                }
);
     ds.load();
     
var  sm  = new  xg.CheckboxSelectionModel();  // CheckBox选择列
      var  cm  = new  xg.ColumnModel([
                                  
new  Ext.grid.RowNumberer(),  // 行号列 
                                  sm,
                                  
{id:'orderId',header:  " 订单号 " , dataIndex: 'name'} ,                            {header:  " 订单时间 " ,   dataIndex: 'booktime'} ,
                                  
{header:  " 订单公司 " , dataIndex: 'company'} ,
                                  
{header: " 客户姓名 " ,dataIndex:'customName'}
                                 ]);
                                 cm.defaultSortable 
=   true ;
    
// //////////////////////////////////////////////////////////////////////////////////////
     //  OrderGrid 
     // //////////////////////////////////////////////////////////////////////////////////////

    
var  ordergrid  =   new  xg.GridPanel( {
                                  ds: ds,
                                  sm: sm, 
                                  cm: cm, 
                                  width:
1000 ,
                                  height:
500 ,
                                  frame:
true ,
                                  title:'Framed 
with  Checkbox Selection and Horizontal Scrolling',
                                  iconCls:'icon
- grid',
                                  renderTo: document.body
                                 }
);
    ordergrid.render();

}
);


        好的,从后台到前台就是这么多了,大家慢慢来,一定要细心,当你的页面在firefox华丽的运行后IE却不露脸的话好好的找找是不是哪儿偷偷多了一个","号呢!
欢迎到http://www.tutu6.com 来看看

posted on 2008-05-25 21:48 Cloud kensin 阅读(6655) 评论(5)  编辑  收藏

<!-- <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/"> <rdf:Description rdf:about="http://www.blogjava.net/tokyo2006/archive/2008/05/25/202776.html" dc:identifier="http://www.blogjava.net/tokyo2006/archive/2008/05/25/202776.html" dc:title="ExtJs + Struts2 + JSON 程序总结" trackback:ping="http://www.blogjava.net/tokyo2006/services/trackbacks/202776.aspx" /> </rdf:RDF> -->

<script type="text/javascript"> //&lt;![CDATA[ Sys.WebForms.PageRequestManager._initialize('AjaxHolder$scriptmanager1', document.getElementById('Form1')); Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tAjaxHolder$UpdatePanel1'], [], [], 90); //]]&gt; </script>

评论

#   re: ExtJs + Struts2 + JSON 程序总结 2008-06-10 11:49 徐桥

有ExtJs + Struts2 + JSON 的原代码
就做一个增加、删除、修改的案例
  回复   更多评论     

#   re: ExtJs + Struts2 + JSON 程序总结[未登录] 2008-11-25 18:10 Y

分享到:
评论

相关推荐

    extjs+struts2+hibernate+json登录程序

    ExtJS + Struts2 + Hibernate + JSON 登录程序是一个典型的Web开发示例,结合了前端JavaScript框架、MVC框架、持久层框架以及数据传输格式,实现了用户登录功能的前后端交互。下面将详细阐述这些技术及其在登录程序...

    @@@extjs+struts2+json plugin的例子

    在IT行业中,构建Web应用程序是一项常见的任务,而`ExtJS`、`Struts2`和`JSON`是其中的关键技术,常被用来创建交互性强、功能丰富的用户界面和高效的服务器通信。下面将详细阐述这三个技术及其结合使用的情况。 ...

    ExtJS+struts2+json登陆实例--源码

    这是一个基于ExtJS、Struts2和JSON的登录实例,适合初学者学习Web应用程序开发。这个实例演示了如何将前端的JavaScript框架ExtJS与后端的Java MVC框架Struts2结合,通过JSON进行数据交换实现用户登录功能。下面将...

    漂亮的Extjs+struts2实现联动下拉

    总结来说,"漂亮的Extjs+struts2实现联动下拉"是结合了Struts2的服务器端处理能力和ExtJS的客户端展示优势的一个实用示例。通过Struts2 Action获取和处理数据,使用ExtJS的ComboBox组件展示和交互,实现动态联动效果...

    Extjs+Struts整合入门实例

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端的Web应用程序。它提供了丰富的组件库,包括数据网格、表格、图表等,使得开发者可以创建出功能强大且用户界面友好的网页应用。Struts,则是Java EE平台上的一...

    EXTJS + Struct +mysql +json

    6. 配置文件:如Structs的struts.xml、EXTJS的app.js,以及数据库连接配置等。 7. 图片和其他静态资源:用于增强用户体验的媒体文件。 通过结合EXTJS、Structs和MySQL,开发者能够构建出高性能、易维护的Web应用,...

    extjs+struts2省市区三级联动完整示例

    总结起来,这个"extjs+struts2省市区三级联动完整示例"展示了如何结合使用ExtJS的客户端能力与Struts2的服务器端控制来实现动态数据交互。通过这种方式,我们可以创建出响应式的用户界面,提高Web应用程序的用户体验...

    extjs+struts2结合实现

    2. **Action配置**:在Struts2中,需要为ExtJS的请求定义对应的Action,例如设置Action的方法返回类型为`json`,并在配置文件中配置相应的结果类型。 3. **JSON响应**:Struts2的Action可以通过`@ResponseBody`注解...

    Extjs+Struts2+JDBC

    在这个例子中,Struts2作为控制器,接收ExtJS发送的AJAX请求,处理数据库操作,并将结果封装成JSON格式返回给前端。 JDBC(Java Database Connectivity)是Java访问数据库的标准API,它提供了连接数据库、执行SQL...

    EXTJS4+STRUTS2+JAVA增删改查

    为了使EXTJS4和STRUTS2能够通信,需要配置STRUTS2的JSON插件,使得ACTION可以返回JSON格式的数据,EXTJS4能解析这些数据更新界面。同时,需要在EXTJS4中设置适当的proxy,如Ajax proxy,指定URL到STRUTS2 ACTION,并...

    Extjs+Struts2系统后台管理框架,完美运行

    例如,通过Struts2的JSON插件,可以方便地将服务器端的数据以JSON格式返回给ExtJS,后者再根据JSON数据动态渲染UI,提高了用户体验。 **ScholarshipSystem项目** "ScholarshipSystem"可能是一个奖学金管理系统,...

    Extjs+Struts2系统后台管理框架

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端(Rich Internet Applications,RIA)的Web应用程序。它提供了丰富的组件模型,包括表格、面板、菜单、工具栏等,使得开发者可以创建出具有桌面应用般用户体验...

    extjs 跟 struts+json

    文章可能通过一个实际项目或示例,详细解释了如何将ExtJS的Grid Panel与Struts 2通过JSON进行数据交互,帮助读者理解这两种技术的整合过程。学习这些内容有助于提升Web应用的用户体验,实现数据的实时更新和交互。

    Hibernate+Spring+Struts2+ExtJS开发CRUD功能实例

    在IT行业中,构建Web应用程序是常见的任务,而“Hibernate+Spring+Struts2+ExtJS开发CRUD功能实例”提供了一个完整的解决方案,用于快速开发基于Java的Web应用,特别是涉及数据库操作的CRUD(创建、读取、更新、删除...

    ExtJS4+Accordion+SERVLET/STRUTS2+JSON+Ext.tree.Panel实例

    总结来说,这个实例展示了如何将前端的ExtJS4框架,特别是其Accordion布局和Ext.tree.Panel组件,与Servlet和Struts2后端框架集成,利用JSON进行数据交换,来创建一个动态的、交互性强的Web应用。用户可以通过折叠和...

    struts2+extjs+json整合实例

    Struts2、ExtJS和JSON是Web开发中的三个关键技术,它们在构建动态、交互式的Web应用程序时发挥着重要作用。下面将详细介绍这三个技术及其整合过程。 首先,Struts2是一个基于MVC(Model-View-Controller)设计模式...

    extjs+struts2分页例子

    Struts2的Result类型可以设置为JSON,以便返回的数据能被EXTJS解析。 具体步骤如下: 1. 创建EXTJS Grid:定义列模型、Store和Column模型,配置分页参数。 ```javascript var store = Ext.create('Ext.data.Store'...

    一个运用Extjs,Struts2, json,iterator技术构建的iterator_jsonDemo2。 将数据从后台传到Extjs表现层。

    一个运用Extjs,Struts2, json,iterator技术构建的iterator_jsonDemo2。iterator_jsonDemo1的链接:http://download.csdn.net/detail/cafebar123/8816409 运用了Extjs,Struts2, json,iterator技术, 将数据从...

    extjs+struts2的一个套路模式

    在IT领域,特别是Web开发中,Struts2与ExtJS的结合是一种常见且高效的技术搭配。Struts2作为后端框架,负责业务逻辑处理及数据交互;而ExtJS作为前端框架,专注于用户界面的构建与优化。两者结合,能够实现前后端...

Global site tag (gtag.js) - Google Analytics