`
guoyiqi
  • 浏览: 1009754 次
社区版块
存档分类
最新评论

Ext2.2+json+jsp获取后台数据的问题 --Ajax

阅读更多

在学习Ext-2.2时,我们通常会先研究它自带的一些例子,今天发现一个关于paging的例子,它是运用php获取json格式数据的,
而我发现网上很多人都是通过java获取后台数据,所以我写了一个jsp获取json格式数据的例子,可供像我一样的初学者参考:
这里共涉及到几个关键的文件:paging.js 和paging.html(ext-2.2\examples\grid目录下) ,
paging.html 的代码不用变,只需要小改一下paging.js就可以了,
就是把 url: 'http://extjs.com/forum/topics-browse-remote.php' 这一行改成
url: 'paging_json.jsp' :

paging.js

Js代码 复制代码
  1. /*  
  2.  * Ext JS Library 2.2.1  
  3.  * Copyright(c) 2006-2009, Ext JS, LLC.  
  4.  * licensing@extjs.com  
  5.  *   
  6.  * http://extjs.com/license  
  7.  */  
  8.   
  9. Ext.onReady(function(){   
  10.   
  11.     // create the Data Store   
  12.     var store = new Ext.data.JsonStore({   
  13.         root: 'topics',   
  14.         totalProperty: 'totalCount',   
  15.         idProperty: 'threadid',   
  16.         remoteSort: true,   
  17.   
  18.         fields: [   
  19.             'title''forumtitle''forumid''author',   
  20.             {name: 'replycount', type: 'int'},   
  21.             {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},   
  22.             'lastposter''excerpt'  
  23.         ],   
  24.   
  25.         // load using script tags for cross domain, if the data in on the same domain as   
  26.         // this page, an HttpProxy would be better   
  27.         proxy: new Ext.data.ScriptTagProxy({   
  28.             //url: 'http://extjs.com/forum/topics-browse-remote.php'   
  29.             url: 'paging_json.jsp'  
  30.         })   
  31.     });   
  32.     store.setDefaultSort('lastpost''desc');   
  33.   
  34.   
  35.     // pluggable renders   
  36.     function renderTopic(value, p, record){   
  37.         return String.format(   
  38.                 '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',   
  39.                 value, record.data.forumtitle, record.id, record.data.forumid);   
  40.     }   
  41.     function renderLast(value, p, r){   
  42.         return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);   
  43.     }   
  44.   
  45.     var pagingBar = new Ext.PagingToolbar({   
  46.         pageSize: 25,   
  47.         store: store,   
  48.         displayInfo: true,   
  49.         displayMsg: 'Displaying topics {0} - {1} of {2}',   
  50.         emptyMsg: "No topics to display",   
  51.            
  52.         items:[   
  53.             '-', {   
  54.             pressed: true,   
  55.             enableToggle:true,   
  56.             text: 'Show Preview',   
  57.             cls: 'x-btn-text-icon details',   
  58.             toggleHandler: function(btn, pressed){   
  59.                 var view = grid.getView();   
  60.                 view.showPreview = pressed;   
  61.                 view.refresh();   
  62.             }   
  63.         }]   
  64.     });   
  65.   
  66.     var grid = new Ext.grid.GridPanel({   
  67.         el:'topic-grid',   
  68.         width:700,   
  69.         height:500,   
  70.         title:'ExtJS.com - Browse Forums',   
  71.         store: store,   
  72.         trackMouseOver:false,   
  73.         disableSelection:true,   
  74.         loadMask: true,   
  75.   
  76.         // grid columns   
  77.         columns:[{   
  78.             id: 'topic'// id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })   
  79.             header: "Topic",   
  80.             dataIndex: 'title',   
  81.             width: 420,   
  82.             renderer: renderTopic,   
  83.             sortable: true  
  84.         },{   
  85.             header: "Author",   
  86.             dataIndex: 'author',   
  87.             width: 100,   
  88.             hidden: true,   
  89.             sortable: true  
  90.         },{   
  91.             header: "Replies",   
  92.             dataIndex: 'replycount',   
  93.             width: 70,   
  94.             align: 'right',   
  95.             sortable: true  
  96.         },{   
  97.             id: 'last',   
  98.             header: "Last Post",   
  99.             dataIndex: 'lastpost',   
  100.             width: 150,   
  101.             renderer: renderLast,   
  102.             sortable: true  
  103.         }],   
  104.   
  105.         // customize view config   
  106.         viewConfig: {   
  107.             forceFit:true,   
  108.             enableRowBody:true,   
  109.             showPreview:true,   
  110.             getRowClass : function(record, rowIndex, p, store){   
  111.                 if(this.showPreview){   
  112.                     p.body = '<p>'+record.data.excerpt+'</p>';   
  113.                     return 'x-grid3-row-expanded';   
  114.                 }   
  115.                 return 'x-grid3-row-collapsed';   
  116.             }   
  117.         },   
  118.   
  119.         // paging bar on the bottom   
  120.         bbar: pagingBar   
  121.     });   
  122.   
  123.     // render it   
  124.     grid.render();   
  125.   
  126.     // trigger the data store load   
  127.     store.load({params:{start:0, limit:25}});   
  128. });   
  129.   
  130.   
  131.   
  132. /**  
  133.  * @class Ext.ux.SliderTip  
  134.  * @extends Ext.Tip  
  135.  * Simple plugin for using an Ext.Tip with a slider to show the slider value  
  136.  */  
  137. Ext.ux.SliderTip = Ext.extend(Ext.Tip, {   
  138.     minWidth: 10,   
  139.     offsets : [0, -10],   
  140.     init : function(slider){   
  141.         slider.on('dragstart'this.onSlide, this);   
  142.         slider.on('drag'this.onSlide, this);   
  143.         slider.on('dragend'this.hide, this);   
  144.         slider.on('destroy'this.destroy, this);   
  145.     },   
  146.   
  147.     onSlide : function(slider){   
  148.         this.show();   
  149.         this.body.update(this.getText(slider));   
  150.         this.doAutoWidth();   
  151.         this.el.alignTo(slider.thumb, 'b-t?'this.offsets);   
  152.     },   
  153.   
  154.     getText : function(slider){   
  155.         return slider.getValue();   
  156.     }   
  157. });  
/*
 * Ext JS Library 2.2.1
 * Copyright(c) 2006-2009, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */

Ext.onReady(function(){

    // create the Data Store
    var store = new Ext.data.JsonStore({
        root: 'topics',
        totalProperty: 'totalCount',
        idProperty: 'threadid',
        remoteSort: true,

        fields: [
            'title', 'forumtitle', 'forumid', 'author',
            {name: 'replycount', type: 'int'},
            {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
            'lastposter', 'excerpt'
        ],

        // load using script tags for cross domain, if the data in on the same domain as
        // this page, an HttpProxy would be better
        proxy: new Ext.data.ScriptTagProxy({
            //url: 'http://extjs.com/forum/topics-browse-remote.php'
            url: 'paging_json.jsp'
        })
    });
    store.setDefaultSort('lastpost', 'desc');


    // pluggable renders
    function renderTopic(value, p, record){
        return String.format(
                '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
                value, record.data.forumtitle, record.id, record.data.forumid);
    }
    function renderLast(value, p, r){
        return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
    }

    var pagingBar = new Ext.PagingToolbar({
        pageSize: 25,
        store: store,
        displayInfo: true,
        displayMsg: 'Displaying topics {0} - {1} of {2}',
        emptyMsg: "No topics to display",
        
        items:[
            '-', {
            pressed: true,
            enableToggle:true,
            text: 'Show Preview',
            cls: 'x-btn-text-icon details',
            toggleHandler: function(btn, pressed){
                var view = grid.getView();
                view.showPreview = pressed;
                view.refresh();
            }
        }]
    });

    var grid = new Ext.grid.GridPanel({
        el:'topic-grid',
        width:700,
        height:500,
        title:'ExtJS.com - Browse Forums',
        store: store,
        trackMouseOver:false,
        disableSelection:true,
        loadMask: true,

        // grid columns
        columns:[{
            id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
            header: "Topic",
            dataIndex: 'title',
            width: 420,
            renderer: renderTopic,
            sortable: true
        },{
            header: "Author",
            dataIndex: 'author',
            width: 100,
            hidden: true,
            sortable: true
        },{
            header: "Replies",
            dataIndex: 'replycount',
            width: 70,
            align: 'right',
            sortable: true
        },{
            id: 'last',
            header: "Last Post",
            dataIndex: 'lastpost',
            width: 150,
            renderer: renderLast,
            sortable: true
        }],

        // customize view config
        viewConfig: {
            forceFit:true,
            enableRowBody:true,
            showPreview:true,
            getRowClass : function(record, rowIndex, p, store){
                if(this.showPreview){
                    p.body = '<p>'+record.data.excerpt+'</p>';
                    return 'x-grid3-row-expanded';
                }
                return 'x-grid3-row-collapsed';
            }
        },

        // paging bar on the bottom
        bbar: pagingBar
    });

    // render it
    grid.render();

    // trigger the data store load
    store.load({params:{start:0, limit:25}});
});



/**
 * @class Ext.ux.SliderTip
 * @extends Ext.Tip
 * Simple plugin for using an Ext.Tip with a slider to show the slider value
 */
Ext.ux.SliderTip = Ext.extend(Ext.Tip, {
    minWidth: 10,
    offsets : [0, -10],
    init : function(slider){
        slider.on('dragstart', this.onSlide, this);
        slider.on('drag', this.onSlide, this);
        slider.on('dragend', this.hide, this);
        slider.on('destroy', this.destroy, this);
    },

    onSlide : function(slider){
        this.show();
        this.body.update(this.getText(slider));
        this.doAutoWidth();
        this.el.alignTo(slider.thumb, 'b-t?', this.offsets);
    },

    getText : function(slider){
        return slider.getValue();
    }
});



paging_json.jsp

Jsp代码 复制代码
  1. <%@ page language="java" pageEncoding="UTF-8"%>   
  2. <%   
  3. String json = "{totalCount:2,topics:[{threadid:1,forumid:1,forumtitle:'Ext;Help',title:'How to add hrefs dynamically into accordion panel',author:'venu',lastposter:'venu',lastpost:1235010582,excerpt:'ccccccccccccccccccccc',replycount:3},{threadid:2,forumid:2,forumtitle:'Ext;Help',title:'How to add hrefs dynamically into accordion panel',author:'venu',lastposter:'venu',lastpost:1235010592,excerpt:'dddddddddddddddd.',replycount:3}]}";   
  4. response.getWriter().write(json);   
  5. System.out.print(json);   
  6. %>  
分享到:
评论

相关推荐

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

    标题中的“ext json请求java后台返回集合数据”指的是在Web开发中,前端EXTJS库通过JSON格式发送请求到Java后台,后台处理后返回一个集合(可能是列表或数组)的数据。EXTJS是一个用JavaScript编写的富客户端框架,...

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

    在CRUD操作中,EXT负责前端的数据展示和用户交互,通过AJAX与后台进行异步通信。 4. **JSON(JavaScript Object Notation)**:JSON是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在...

    ext+struts2+json登陆方法.pdf

    - 在Struts2中,可以使用JSON插件或直接在Action中返回JSON结果,使服务器能够以JSON格式发送数据给客户端,这对于AJAX请求特别有用,比如在这个登录场景中,可以无刷新地更新用户界面。 总结,这个例子展示了如何...

    struts2+spring2.5+jdbc+ext+json实例用到的lib包

    Struts2、Spring 2.5、JDBC、Ext 和 JSON 是 Java Web 开发中常见的技术栈,它们各自承担着不同的职责,共同构建了一个功能强大的应用程序。在这个实例中,我们看到的是一个集成这些技术的库文件集合。接下来,我们...

    Ext+JSP实现数据提交

    本篇将详细探讨如何利用`Ext`前端框架与`JSP`服务器端页面来实现数据的提交。 `Ext`是一个强大的JavaScript库,主要用于构建富客户端应用。它提供了丰富的组件库,包括表格、表单、菜单等,以及一套完整的MVC...

    Ext Gantt + jsp + servlet 工程实例(EXT 甘特图实例)

    5. **数据交互**: 通过Ajax请求,前端Ext Gantt组件向后端发送数据,如添加、修改或删除任务。Servlet接收到这些请求后,可能需要与数据库交互,更新项目数据。然后,Servlet返回响应,更新Gantt图显示。 6. **JSON...

    JSON.rar_JSON Hibernate_extjs_json struts ext_jsp json extjs_str

    在给定的标题"JSON.rar_JSON Hibernate_extjs_json struts ext_jsp json extjs_str"中,我们可以看出这是一个与JSON相关的项目,可能包含了使用JSON进行数据交换的各种技术集成。JSON在这里可能是作为前后端数据传输...

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

    首先,Ext JS 2.2是用于构建富客户端应用的JavaScript库,它提供了丰富的组件和布局,使得在浏览器端创建复杂的用户界面变得容易。在这个登录实例中,Ext JS用于创建交互式的登录表单和处理用户输入。 Struts2是...

    Ext JS mvc +jsp 例子

    在与JSP结合时,JSP主要负责后端的逻辑处理,如数据的获取、处理和存储。在Ext JS应用中,JSP通常作为服务端的接口,通过Ajax请求与前端交互。例如,你可以创建一个JSP页面来处理数据请求,如下所示: ```jsp ...

    Extjs Tree + JSON + Struts2

    通过 `Ext.Ajax.request` 或者 `Ext.data.TreeStore` 的 proxy 配置,可以实现与后台的通信。 5. **WAR 包**: `war` 扩展名代表 Web Application Archive,是 Java Web 应用的标准打包格式。这个项目的最终产品是一...

    Ext+jsp+servlet做到学生信息管理系统(带数据库)

    【标题】"Ext+jsp+servlet做到学生信息管理系统(带数据库)"是一个基于Web的教育管理系统的实现,它结合了三种技术:ExtJS、JSP和Servlet,用于创建一个功能完善的学籍管理系统。该系统的核心功能是管理和维护学生...

    Struts2+Json+ExtJS分页

    这里的`UserAction`类实现了Struts2的Action接口,通过调用`UserDAO`类的方法获取数据,并将其封装成JSON格式返回。 ##### 3. JavaScript脚本实现 JavaScript部分主要用于实现前端的分页效果。下面是一段简化的...

    ext/和Ajax结合的说明和例子,获得后台数据,很适合大家

    ### ext/与Ajax结合获取后台数据的说明及实例 #### 一、引言 随着Web技术的不断发展,前端框架和Ajax技术的结合越来越普遍。在本文档中,我们将详细介绍如何利用ExtJS(简称ext/)与Ajax技术相结合来实现从前端...

    ext+jsp实现登入.rar

    标题“ext+jsp实现登入.rar”表明这是一个关于使用EXT JS(一种富客户端JavaScript框架)与JSP(JavaServer Pages)结合实现登录功能的项目。EXT JS通常用于构建用户界面,而JSP则处理服务器端逻辑。这个压缩包包含...

    Ext Desktop+struts2 实例

    6. **AJAX通信**:Ext JS 使用 AJAX 技术与服务器进行异步通信,Struts2 的 JSON 插件则负责接收这些请求并返回 JSON 数据。这种通信方式提高了用户体验,因为页面无需刷新即可完成数据的获取和更新。 7. **安全与...

    JSP+Ext实现CURD

    这里的JSP页面可能负责与数据库交互,获取或更新会员数据,而Ext组件则用于展示和编辑这些数据。 总结来说,"JSP+Ext实现CURD"是一个典型的前后端分离的开发模式,其中JSP作为服务器端,负责业务逻辑和数据库操作,...

    ext前后台交互实例

    "ext前后台交互实例"这一主题聚焦于如何通过JSON(JavaScript Object Notation)格式的数据进行前后端之间的通信,以实现数据的高效传输和处理。本文将深入探讨此主题,解析其中的关键概念和技术细节。 ### JSON在...

    JSP中获取ExtJS.Ajax前台传递的JSON数据实现过程

    在JSP页面中获取由ExtJS和Ajax组合使用的前台传递的JSON数据并处理的过程,涉及到多个知识点和技术组件。这个过程通常包括以下几个关键步骤: 1. JSON数据的前台生成与传递: 使用ExtJS框架可以方便地构建用户界面...

    Json(struts2+Ext)

    标题中的“Json(struts2+Ext)”指的是在Java Web开发框架Struts2中结合Ext库进行JSON数据交互的相关技术。Struts2是一个流行的MVC框架,而JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,常用于...

Global site tag (gtag.js) - Google Analytics