小弟刚刚接触Ext,看书看的脑袋都大了,因为公司要用Ext开发个后台界面,现在做到分页显示数据这块,在网上找了段代码,
代理数据的时候是走了,但是不知道为什么不显示数据,希望各位大侠帮忙看看。
Ext表格代码   Ext.onReady(function(){   
            var sm = new Ext.grid.CheckboxSelectionModel();   
            var store2 = new Ext.data.Store({   
                proxy: new Ext.data.HttpProxy({   
                    url:"http://localhost:8080/testExt/store.action?aa=123",   
                    method:"post"   
                }),   
                reader: new Ext.data.JsonReader({//读取json数据   
                    root:'newsList',                        //   
                    totalProperty:'totalProperty',  //总记录数   
                    id:'id'                    
                    },[{name:'id'},   
                        {name:'newstype'},   
                        {name:'newsTitle'},   
                        {name:'newsContent'},   
                        {name:'newsDateTime'}   
                    ])                     
            });
           
            //创建列   
            var column = new Ext.grid.ColumnModel([                
                sm,                                                     //复选框   
                {header:'编号',dataIndex:'id'},   
                {header:'类型',dataIndex:'newstype'},   
                {header:'标题',dataIndex:'newsTitle'},   
                {header:'内容',dataIndex:'newsContent'},   
                {header:'时间',dataIndex:'newsDateTime'}                 
            ]);   
            column.defaultSortable = true;//默认可排序   
            //创建一个工具条   
            var tba = new Ext.Toolbar();   
                       
            //面板   
            var grid = new Ext.grid.GridPanel({   
                el:'showNews',   
                width:600,   
                height:300,   
                title:'新闻列表',   
                store:store2,   
                cm:column,                          //创建的列   
                trackMouseOver:false,   
                autoScroll: true,   
                loadMask: {msg:'正在加载数据,请稍侯……'},   
                sm:sm,                 
                //下边   
                bbar:new Ext.PagingToolbar({   
                    pageSize:5,   
                    store:store2,   
                    displayInfo:true,   
                    displayMsg:'显示第 {0} 条到 {1} 条记录,一共 {2} 条',   
                    emptyMsg:'没有记录'   
                })   
            });                
            grid.render();             
            store2.load();                       
        });   
     </script>  
  </head>
  
  <body>
    <div id="showNews" ></div>
store.action代码  生成一个json格式的字符串  response.setContentType("text/html;charset=gbk");
PrintWriter out = response.getWriter();

System.out.println(request.getParameter("aa"));
List jsonArray = new ArrayList();
       int i = 0;
     while(i<20){   
   Map map = new HashMap();   
   map.put("id", i);   
   map.put("newstype", "国内新闻");   
   map.put("newsTitle", "第"+i+"条新闻标题");   
   map.put("newsContent", "第"+i+"条新闻内容");     
   map.put("newsDateTime", "2009-9-9");   
   jsonArray.add(map);  
   i++; 
     }  
    
    String jsonStr = jsonArray.toString();
    
    String jsonString = "{start:"+0+",limit:"+5+",totalProperty:"+20+",newsList:"+jsonStr+"}";

    
    out.write(jsonString);
生成的json格式字符串   {start:0,limit:5,totalProperty:20,newsList:[{newsContent=第0条新闻内容, newsDateTime=2009-9-9, newsTitle=第0条新闻标题, newstype=国内新闻, id=0}, {newsContent=第1条新闻内容, newsDateTime=2009-9-9, newsTitle=第1条新闻标题, newstype=国内新闻, id=1}, {newsContent=第2条新闻内容, newsDateTime=2009-9-9, newsTitle=第2条新闻标题, newstype=国内新闻, id=2}, {newsContent=第3条新闻内容, newsDateTime=2009-9-9, newsTitle=第3条新闻标题, newstype=国内新闻, id=3}, {newsContent=第4条新闻内容, newsDateTime=2009-9-9, newsTitle=第4条新闻标题, newstype=国内新闻, id=4}, {newsContent=第5条新闻内容, newsDateTime=2009-9-9, newsTitle=第5条新闻标题, newstype=国内新闻, id=5}, {newsContent=第6条新闻内容, newsDateTime=2009-9-9, newsTitle=第6条新闻标题, newstype=国内新闻, id=6}, {newsContent=第7条新闻内容, newsDateTime=2009-9-9, newsTitle=第7条新闻标题, newstype=国内新闻, id=7}, {newsContent=第8条新闻内容, newsDateTime=2009-9-9, newsTitle=第8条新闻标题, newstype=国内新闻, id=8}, {newsContent=第9条新闻内容, newsDateTime=2009-9-9, newsTitle=第9条新闻标题, newstype=国内新闻, id=9}, {newsContent=第10条新闻内容, newsDateTime=2009-9-9, newsTitle=第10条新闻标题, newstype=国内新闻, id=10}, {newsContent=第11条新闻内容, newsDateTime=2009-9-9, newsTitle=第11条新闻标题, newstype=国内新闻, id=11}, {newsContent=第12条新闻内容, newsDateTime=2009-9-9, newsTitle=第12条新闻标题, newstype=国内新闻, id=12}, {newsContent=第13条新闻内容, newsDateTime=2009-9-9, newsTitle=第13条新闻标题, newstype=国内新闻, id=13}, {newsContent=第14条新闻内容, newsDateTime=2009-9-9, newsTitle=第14条新闻标题, newstype=国内新闻, id=14}, {newsContent=第15条新闻内容, newsDateTime=2009-9-9, newsTitle=第15条新闻标题, newstype=国内新闻, id=15}, {newsContent=第16条新闻内容, newsDateTime=2009-9-9, newsTitle=第16条新闻标题, newstype=国内新闻, id=16}, {newsContent=第17条新闻内容, newsDateTime=2009-9-9, newsTitle=第17条新闻标题, newstype=国内新闻, id=17}, {newsContent=第18条新闻内容, newsDateTime=2009-9-9, newsTitle=第18条新闻标题, newstype=国内新闻, id=18}, {newsContent=第19条新闻内容, newsDateTime=2009-9-9, newsTitle=第19条新闻标题, newstype=国内新闻, id=19}]}
System.out.println(request.getParameter("aa"));这段在后台显示了123所以应该代理部分是走了
但是不知道为什么数据没有显示

解决方案 »

  1.   

    JSON格式应该是:
    不使用=要用:,字符串两边要引号{start:0,limit:5,totalProperty:20,newsList:[
    {newsContent:"第0条新闻内容", newsDateTime:"2009-9-9", 
     newsTitle:"第0条新闻标题",newstype:"国内新闻", id:0},
    {newsContent:"第1条新闻内容", newsDateTime:"2009-9-9",
     newsTitle:"第1条新闻标题", newstype:"国内新闻", id:1}
    ]}
      

  2.   

    这是我刚写的分页的程序,纯jsp做的,只是模拟取数据,但是基本原理都是一样的。你可以参考。
    paging.html:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Paging Grid Example</title><link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />    <!-- GC -->
      <!-- LIBS -->
      <script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
      <!-- ENDLIBS -->    <script type="text/javascript" src="ext/ext-all.js"></script>
        
    <script type="text/javascript" src="paging.js"></script>
    <link rel="stylesheet" type="text/css" href="grid-examples.css" /></head>
    <body><h1>Paging Grid Example</h1>
    <p>This example shows how to create a grid with paging. This grid uses a ScriptTagProxy to fetch cross-domain
        remote data (from the Ext forums).</p>
    <p>Note that the jsis not minified so it is readable. See <a href="paging.js">paging.js</a>.</p><div id="topic-grid"></div></body>
    </html>paging.js:Ext.onReady(function(){
        var store = new Ext.data.JsonStore({
            root: 'data',
            totalProperty: 'total',
            id: 'id',
            fields: [
                {name: 'id', type: 'string'},
                {name: 'name', type: 'string'},
                {name: 'email', type: 'string'}
            ],
            proxy: new Ext.data.HttpProxy({
                url: 'http://localhost:8080/1.jsp'
            })
        });    var pagingBar = new Ext.PagingToolbar({
            pageSize: 3,
            store: store,
            displayInfo: true,
            displayMsg: 'Displaying topics {0} - {1} of {2}',
            emptyMsg: "No topics to display"
        });    var grid = new Ext.grid.GridPanel({
            el:'topic-grid',
            width:500,
            height:300,
            title:'ExtJS Paging Test',
            store: store,
            columns:[
             {header:"ID",dataIndex:"id"},
         {header:"Name",dataIndex:"name"},
         {header:"EMail",dataIndex:"email"}
            ],
            bbar: pagingBar
        });
        grid.render();
        store.load({params:{start:0, limit:3}});
    });1.jsp: 模拟后台分页取数据的代码:<%
    request.setCharacterEncoding("utf-8");
    String _start = request.getParameter("start");
    String _limit = request.getParameter("limit");
    int start = Integer.parseInt(_start);
    int limit = Integer.parseInt(_limit);
    //返回的json字符串
    String responseString = "{total:50,data:[";
    for(int i=0; i<limit; i++){
    responseString+= ("{id: 'id" + i+start + "',name:'name" + i+start + "',email:'email" + i+start + "'}");
    if(i!=limit-1){
    responseString+= ","; 
    }
    }
    responseString+="]}";

    System.out.println(responseString);
    response.setCharacterEncoding("utf-8");
    response.setContentType("text/json;charset=utf-8");
    response.getWriter().write(responseString);
    response.flushBuffer();
    response.getWriter().close();
    %>