zoukankan      html  css  js  c++  java
  • 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, 
                                      1000,
                                      height:500,
                                      frame:true,
                                      title:'Framed with Checkbox Selection and Horizontal Scrolling',
                                      iconCls:'icon-grid',
                                      renderTo: document.body
                                     });
        ordergrid.render();
    
    });
  • 相关阅读:
    [Functional Programming] Running though a serial number prediction functions for tagging, pairing the result into object
    [Angular] Communicate with Angular Elements using Inputs and Events
    [Tools] Target specific browsers with babel-preset-env and the babel pollyfill (browserslist)
    [Webpack] Externalize Dependencies to be Loaded via CDN with webpack
    [Webpack] Analyze a Production JavaScript Bundle with webpack-bundle-analyzer
    [Algorithm] Largest sum of non-adjacent numbers
    [Angular] Use ngx-build-plus to compile Angular Elements
    [Algorithm] Search for matching words
    Is life always hard?
    poj3177 Redundant Paths
  • 原文地址:https://www.cnblogs.com/zhujiabin/p/4521526.html
Copyright © 2011-2022 走看看