`
taiwei.peng
  • 浏览: 235314 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

ext js json 数据

    博客分类：
  • js
 
阅读更多

1.引入struts2核心jar包，与jsonplugin-0.32.jar

2.配置struts.xml文件

 

[html] view plain copy
 
  1. <constant name="struts.i18n.encoding" value="utf-8"/>  
  2. <package name="example" namespace="/" extends="json-default">  
  3.         <action name="gridUtil" class="com.bict.GridUtil" method="grid">   
  4.             <result type="json" /> <!--将bean属性以json字符串返回浏览器-->  
  5.         </action>   
  6.     <action name="gridAction" class="com.bict.util.ClientModel" method="getJSONPage">  
  7.         <result name="success">/json_grid.jsp</result>  
  8.     </action>  
  9. </package>  

配置struts.i18n.encoding常量，不再使用GBK编码，而是UTF-8编码，这是回为AJAX的POST请求都是以UTF-8的方式进行编码的。

 

3.后台部分User.java

 

[java] view plain copy
 
  1. package com.bict;  
  2. import java.util.List;  
  3. public class User {  
  4.         private int id;   
  5.         private String name;   
  6.         private String age;   
  7.         private String descn;  
  8.     public int getId() {  
  9.         return id;  
  10.     }  
  11.     public void setId(int id) {  
  12.         this.id = id;  
  13.     }  
  14.     public String getName() {  
  15.         return name;  
  16.     }  
  17.     public void setName(String name) {  
  18.         this.name = name;  
  19.     }  
  20.     public String getAge() {  
  21.         return age;  
  22.     }  
  23.     public void setAge(String age) {  
  24.         this.age = age;  
  25.     }  
  26.     public String getDescn() {  
  27.         return descn;  
  28.     }  
  29.     public void setDescn(String descn) {  
  30.         this.descn = descn;  
  31.     }  
  32.       
  33. }  

定义了一个User对象，当作数据载体

 

4.gridUtil.java

 

[java] view plain copy
 
  1. package com.bict;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5. import com.bict.User;  
  6.   
  7. import com.opensymphony.xwork2.ActionSupport;  
  8.   
  9. public class GridUtil extends ActionSupport {  
  10.     private int totalProperty = 100;  
  11.     private List root;  
  12.   
  13.     public List getRoot() {  
  14.         return root;  
  15.     }  
  16.   
  17.     public void setRoot(List root) {  
  18.         this.root = root;  
  19.     }  
  20.   
  21.     public int getTotalProperty() {  
  22.         return totalProperty;  
  23.     }  
  24.   
  25.     public void setTotalProperty(int totalProperty) {  
  26.         this.totalProperty = totalProperty;  
  27.     }  
  28.   
  29.     public String grid() {  
  30.         root = new ArrayList<User>();  
  31.         User user1 = new User();  
  32.         user1.setAge("20");  
  33.         user1.setDescn("descn1");  
  34.         user1.setId(1);  
  35.         user1.setName("name1");  
  36.         root.add(user1);  
  37.         User user2 = new User();  
  38.         user2.setAge("19");  
  39.         user2.setDescn("descn2");  
  40.         user2.setId(2);  
  41.         user2.setName("name2");  
  42.         root.add(user2);  
  43.   
  44.         return SUCCESS;  
  45.   
  46.     }  
  47.   
  48. }  

定义了一个Action用于进行数据转化与返回。可以在这里进行与数据库交互，totalProperty是总记录数，root是所有数据库取出的值，它是一个List集合。

 

5.json_grid.jsp,引入Ext-3.2.1相关配置

 

[html] view plain copy
 
  1.     <link href="ext-3.2.1/resources/css/ext-all.css" rel="stylesheet" type="text/css">  
  2.     <script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script>  
  3.     <script type="text/javascript" src="ext-3.2.1/ext-all.js"></script>  
  4.     <script type="text/javascript" src="ext-3.2.1/src/locale/ext-lang-zh_CN.js"></script>  
  5.     <script type="text/javascript" src="js/json_grid.js"></script>  
  6.     <body>  
  7.        <div id="grid"></div>  
  8.     </body>  

 

6.json_grid.js

 

[html] view plain copy
 
  1. Ext.onReady(function(){  
  2.     var ds = new Ext.data.Store({  
  3.             proxy: new Ext.data.HttpProxy({  
  4.                 url:'gridUtil.action'  
  5.             }),  
  6.             reader: new Ext.data.JsonReader({  
  7.                 totalProperty: 'totalProperty',  
  8.                 root: 'root'  
  9.             }, [  
  10.                 {name: 'id'},  
  11.                 {name: 'name'},  
  12.                 {name: 'descn'}  
  13.             ])  
  14.     });  
  15.       
  16.   
  17.     ds.load({params:{start:0,limit:10}});  
  18.       
  19.       
  20.      var sm = new Ext.grid.CheckboxSelectionModel();   
  21.       
  22.     var cm = new Ext.grid.ColumnModel([   
  23.         new Ext.grid.RowNumberer(),   
  24.         sm,   
  25.         {header:'编号',dataIndex:'id'},   
  26.         {header:'名称',dataIndex:'name'},   
  27.         {header:'年龄',dataIndex:'age'},   
  28.         {header:'描述',dataIndex:'descn'}   
  29.     ]);   
  30.     cm.defaultSortable = true;   
  31.    
  32.     var ds = new Ext.data.Store({   
  33.         proxy: new Ext.data.HttpProxy({url:'gridUtil.action'}),   
  34.         reader: new Ext.data.JsonReader({   
  35.             totalProperty: 'totalProperty',   
  36.             root: 'root'   
  37.         }, [   
  38.             {name: 'id'},   
  39.             {name: 'name'},   
  40.             {name: 'descn'},{name:'age'}   
  41.         ])   
  42.     });   
  43.     ds.load({params:{start:0,limit:10}});   
  44.       
  45.     var grid = new Ext.grid.GridPanel({   
  46.         el: 'grid',   
  47.         ds: ds,   
  48.         cm: cm,   
  49.         sm: sm,   
  50.         title: 'struts2->JSON',   
  51.         //height:400,   
  52.         autoHeight: true,   
  53.        bbar: new Ext.PagingToolbar({   
  54.             pageSize: 10,   
  55.             store: ds,   
  56.             displayInfo: true,   
  57.             displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',   
  58.             emptyMsg: "没有记录"   
  59.         })  
  60.     });   
  61.     grid.render();   
  62. })  

 

 

分享到：
| ext js 自定义表签
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Spring3+Hibernate4+SpringMVC整合Ext：JSON数据格式传输

    2、ext4，这个项目是用来做ext的公共js库用的，这样不比没个项目都添加ext的js文件，方便开发。 切记将ext4项目部署上去，并且应用名称为ext4，否则访问fes项目是会找不到ext的js文件。 jxcia.sql是数据库脚本，...

    ext tree json 例子（不含EXT包）

    在本例中，我们将探讨EXT JS Tree与JSON数据的结合使用，以及如何在不依赖EXT包的情况下实现这些功能。 "ext tree json 例子（不含EXT包）"这个标题暗示我们将讨论如何在不直接引用EXT完整包的情况下，仅使用EXT JS...

    ext树　无限级　json 数据格式　动态加载

    在EXT JS这个强大的JavaScript库中，树形组件（Tree）是一种常见的UI元素，常用于展现层级结构的数据。本文将深入探讨如何处理无限级JSON数据格式并实现动态加载，以优化EXT树的性能。 首先，我们要理解EXT树的基本...

    ext grid json分页显示

    4. 后端返回JSON数据到前端，EXT Grid解析JSON，渲染新的数据行，并更新分页状态。 5. 这样，用户就能看到动态加载的分页数据，而无需手动刷新整个页面。 标签"Ajax"强调了这种异步数据交互的方式。Ajax技术的核心...

    Ext tree json Demo

    4. **Ajax请求和数据解析**：利用`Ext.Ajax.request`发送异步请求，获取JSON数据后，使用`Ext.decode`将JSON字符串解析为JavaScript对象。 5. **树节点的渲染和交互**：配置`uiProviders`和`renderer`函数，自定义...

    SSH+EXT如何返回JSON

    此外，页面还会直接输出一个名为`ja`的变量，这个变量将在后端代码中填充JSON数据。 ```jsp ;charset=utf-8" %&gt; ${ja} ``` #### 五、locationAction类代码详解 接下来是整个流程的核心部分——`locationAction`类...

    深入浅出Ext_JS：数据存储与传输

    在Web应用开发中，数据的存储与传输是核心环节，尤其在富客户端（Rich Internet Application, RIA）开发中，JavaScript库Ext JS提供了强大的数据管理功能。本文将围绕Ext JS的数据存储与传输展开详细讲解。 首先，...

    ext json struts 完整无错源码

    JSON（JavaScript Object Notation）则是一种轻量级的数据交换格式，它允许在服务器端和客户端之间进行高效的数据传输。Struts 是一个开源的 Java Web 框架，用于构建 MVC（Model-View-Controller）架构的应用程序。...

    Ext+json,+jquery培训资料

    EXT+json+jquery培训资料是针对前端开发技术的培训材料，涵盖了EXT库的使用、JSON数据格式以及jQuery框架。EXT是一个强大的JavaScript库，主要用于构建富客户端应用程序，它提供了丰富的组件和用户界面元素。jQuery...

    读Ext之十（解析JSON）

    综上所述，“读Ext之十（解析JSON）”可能会涵盖如何在Ext JS环境中设置和使用Store来解析和操作JSON数据，以及如何利用数据模型、Proxy、Reader等工具实现数据的加载、显示和交互。通过学习这个主题，开发者可以更...

    EXT JSON Sqlserver 分页 全部正常运行

    在IT领域，这个标题涉及到的是一个使用EXT JS（一种基于JavaScript的富客户端框架）和JSON（JavaScript Object Notation）数据格式，结合SQL Server数据库实现分页功能的示例。EXT JS允许开发者创建复杂的、交互式的...

    EXT实例+JSON

    JSON的结构与JavaScript对象相似，使得在EXT中处理JSON数据非常方便。例如，你可以使用`Ext.util.JSON.decode()`方法将JSON字符串转换为JavaScript对象，然后将其加载到EXT的数据存储（如`Ext.data.Store`）中。 ...

    ssh+ext+json+dwr技术实现的动态树

    综上所述，这个项目展示了如何利用SSH框架搭建后端服务，EXT JS 3.0提供用户界面，JSON作为数据交换格式，以及DWR实现无刷新通信，共同构建一个动态的、交互式的树形展示。这样的组合既提高了用户体验，又降低了...

    Ext tree json 动态加载完美实例

    在本文中，我们将深入探讨如何使用Ext JS的Tree Panel与JSON数据进行动态加载，并实现多选和单选功能。Ext JS是一种强大的JavaScript库，用于构建富客户端应用，而Tree Panel则是展示层次结构数据的一种组件。在后台...

    ext json请求java后台返回集合数据

    通常这样的文章会详细介绍如何实现这个过程，包括前端EXTJS的Ajax请求、JSON数据的构建，以及Java后台如何处理请求并返回集合数据。 在标签中，“源码”可能暗示我们需要关注代码实现的细节，“工具”可能是指用于...

    Ext.tree.TreeLoader附带封装的json类

    在本文中，我们将深入探讨`Ext.tree.TreeLoader`与JSON数据在Ext JS框架中的应用。`Ext.tree.TreeLoader`是Ext JS库中的一个组件，它负责加载和解析树形结构的数据，而JSON（JavaScript Object Notation）则是一种轻...

    使用html标签、jQuery-EasyUI和Ext4分别展示json数据

    在给定的标题“使用html标签、jQuery-EasyUI和Ext4分别展示json数据”中，我们可以深入探讨如何利用这些技术来处理和显示JSON（JavaScript Object Notation）数据。JSON是一种轻量级的数据交换格式，广泛应用于...

    @@@java+struts2+ext+json(完整的示例程序)实现CRUD

    3. **EXT**：EXT（通常指EXT JS）是一个JavaScript库，专注于构建富客户端的Web应用程序。EXT提供了一系列可重用的组件，如表格、表单、面板等，用于创建复杂的用户界面。在CRUD操作中，EXT负责前端的数据展示和用户...

    Struts2＋spring2.5＋EXT＋json实例

    Struts2可以通过插件轻松地将Action结果转换为JSON格式，EXTJS的组件则可以直接解析这些JSON数据，实时更新视图，实现异步数据交互。 在"SSJExt"这个实例中，Struts2负责处理HTTP请求，Spring2.5管理依赖并提供业务...

    java+struts2+ext+json(完整的示例程序)实现CRUD

    EXT JS（现在的Sencha EXT JS）特别适合构建数据驱动的应用，它有强大的表格、表单和图表组件，能与后端服务进行无缝的数据交换。在本示例中，EXT将用于展示和编辑由Struts2处理的数据。 JSON（JavaScript Object ...

Magicbox
Global site tag (gtag.js) - Google Analytics