阳光VIP

少壮不努力，老大徒伤悲。平日弗用功，自到临期悔。
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

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

Posted on 2012-02-13 22:47  阳光VIP  阅读(303)  评论(0)    收藏  举报

在学习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. });  
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. %>