EXTJS gridpanel 读取数据问题

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EXT分页</title>
<link rel="stylesheet" type="text/css"
href="js/resources/css/ext-all.css" />
<script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">   
        Ext.onReady(function() { 
        var ds = new Ext.data.Store({ 
        proxy: new Ext.data.HttpProxy({url:'db.jsp'}), 
       reader: new Ext.data.JsonReader({ 
       totalProperty: 'total',
                root:'root1'}, 
                [{name: 'id',type: 'int'}, 
                 {name: 'name'}, 
                 {name: 'descn'}]) 
                });        var sm = new Ext.grid.CheckboxSelectionModel(); 
       var cm = new Ext.grid.ColumnModel([ 
          new Ext.grid.RowNumberer(), 
          sm, 
         {header:'编号',dataIndex:'id'}, 
         {header:'名称',dataIndex:'name'}, 
         {header:'描述',dataIndex:'descn'} 
          ]); 
        var grid = new Ext.grid.GridPanel({ 
                  el: 'table', 
                  ds: ds, 
                  cm: cm, 
               viewConfig: { 
                 forceFit: true 
                       }, 
            title: 'db-Grid', 
               sm:sm, 
            width:600, 
           height:380, 
         loadMask: true, 
            frame: true, 
             bbar: new Ext.PagingToolbar({ 
         pageSize: 10, 
            store: ds, 
      displayInfo: true, 
       displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', 
         emptyMsg: "没有记录" 
          })              }) 
        ds.load({params:{start:0,limit:10}}); 
        alert(2);
        grid.render();         
        alert(ds.getCount());
}
);         
        </script>
</head>
<body>
<div id='table'></div>

</body>
</html>
JSP：如下
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<html>
  <head>
  </head>
  <body>
  <%
    response.getWriter().write("{total:100,root1:[{id:0,name:'name0',descn:'descn0'}, {id:1,name:'name1',descn:'descn1'}, {id:2,name:'name2',descn:'descn2'}, {id:3,name:'name3',descn:'descn3'}, {id:4,name:'name4',descn:'descn4'}, {id:5,name:'name5',descn:'descn5'}, {id:6,name:'name6',descn:'descn6'}, {id:7,name:'name7',descn:'descn7'}, {id:8,name:'name8',descn:'descn8'}, {id:9,name:'name9',descn:'descn9'} ]}");
%>
  </body>
</html>刚研究，解决不了了。郁闷！

解决方案 »

  1.   

    grid 里面读不到json数据，也没报错
      

  2.   

    id和name是关键字，，，你先换其他的试下，，，EXT不允许使用关键字
      

  3.   

    在    reader: new Ext.data.JsonReader({ 
          totalProperty: 'total', 下加一句id:"你的那个id",
      

  4.   

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>EXT分页</title>
    <link rel="stylesheet" type="text/css"
    href="js/resources/css/ext-all.css" />
    <script type="text/javascript" src="js/adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->
    <script type="text/javascript" src="js/ext-all.js"></script>
    <script type="text/javascript">   
            Ext.onReady(function() { 
            var ds = new Ext.data.Store({ 
            proxy: new Ext.data.HttpProxy({url:'db.jsp'}), 
           reader: new Ext.data.JsonReader({ 
           totalProperty: 'total',
                    root:'root2',
                    id:'id'}, 
                    [{name: 'id',type: 'int'}, 
                     {name: 'TCname'}, 
                     {name: 'descn'}]) 
                    });        var sm = new Ext.grid.CheckboxSelectionModel(); 
           var cm = new Ext.grid.ColumnModel([ 
              new Ext.grid.RowNumberer(), 
              sm, 
             {header:'编号',dataIndex:'id'}, 
             {header:'名称',dataIndex:'TCname'}, 
             {header:'描述',dataIndex:'descn'} 
              ]); 
            var grid = new Ext.grid.GridPanel({ 
                      el: 'table', 
                      ds: ds, 
                      cm: cm, 
                   viewConfig: { 
                     forceFit: true 
                           }, 
                title: 'db-Grid', 
                   sm:sm, 
                width:600, 
               height:380, 
             loadMask: true, 
                frame: true, 
                 bbar: new Ext.PagingToolbar({ 
             pageSize: 10, 
                store: ds, 
          displayInfo: true, 
           displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', 
             emptyMsg: "没有记录" 
              })              }) 
            ds.load({params:{start:0,limit:10}}); 
            alert(2);
            grid.render();         
            alert(ds.getCount());
    }
    );         
            </script>
    </head>
    <body>
    <div id='table'></div>

    </body>
    </html>JSON：response.getWriter().write("{total:100,root2:[{id:0,TCname:'TCname0',descn:'descn0'}, {id:1,TCname:'TCname1',descn:'descn1'}, {id:2,TCname:'TCname2',descn:'descn2'}, {id:3,TCname:'TCname3',descn:'descn3'}, {id:4,TCname:'TCname4',descn:'descn4'}, {id:5,TCname:'TCname5',descn:'descn5'}, {id:6,TCname:'TCname6',descn:'descn6'}, {id:7,TCname:'TCname7',descn:'descn7'}, {id:8,TCname:'TCname8',descn:'descn8'}, {id:9,TCname:'TCname9',descn:'descn9'}]}");
      

  5.   


    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <title>EXT分页 </title> 
    <link rel="stylesheet" type="text/css" 
    href="js/resources/css/ext-all.css" /> 
    <script type="text/javascript" src="js/adapter/ext/ext-base.js"> </script> 
    <!-- ENDLIBS --> 
    <script type="text/javascript" src="js/ext-all.js"> </script> 
    <script type="text/javascript">  
            Ext.onReady(function() { 
            var ds = new Ext.data.Store({ 
            proxy: new Ext.data.HttpProxy({url:'db.jsp'}), 
          reader: new Ext.data.JsonReader({ 
          totalProperty: 'total', 
                    root:'root2', 
                    id:'id'}, 
                    [{name: 'id',type: 'int'}, 
                    {name: 'TCname'}, 
                    {name: 'descn'}]) 
                    });       var sm = new Ext.grid.CheckboxSelectionModel(); 
          var cm = new Ext.grid.ColumnModel([ 
              new Ext.grid.RowNumberer(), 
              sm, 
            {header:'编号',dataIndex:'id'}, 
            {header:'名称',dataIndex:'TCname'}, 
            {header:'描述',dataIndex:'descn'} 
              ]); 
            var grid = new Ext.grid.GridPanel({ 
                      el: 'table', 
                      ds: ds, 
                      cm: cm, 
                  viewConfig: { 
                    forceFit: true 
                          }, 
                title: 'db-Grid', 
                  sm:sm, 
                width:600, 
              height:380, 
            loadMask: true, 
                frame: true, 
                bbar: new Ext.PagingToolbar({ 
            pageSize: 10, 
                store: ds, 
          displayInfo: true, 
          displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条', 
            emptyMsg: "没有记录" 
              })             }) 
            ds.load({params:{start:0,limit:10}}); 
            alert(2); 
            grid.render();        
            alert(ds.getCount()); 
    } 
    );        
            </script> 
    </head> 
    <body> 
    <div id='table'> </div> </body> 
    </html> 
      

  6.   

    你的db.jsp这个文件有问题：
    JSP：如下 
    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
    <html> 
      <head> 
      </head> 
      <body> 
      <% 
        response.getWriter().write("{total:100,root1:[{id:0,name:'name0',descn:'descn0'}, {id:1,name:'name1',descn:'descn1'}, {id:2,name:'name2',descn:'descn2'}, {id:3,name:'name3',descn:'descn3'}, {id:4,name:'name4',descn:'descn4'}, {id:5,name:'name5',descn:'descn5'}, {id:6,name:'name6',descn:'descn6'}, {id:7,name:'name7',descn:'descn7'}, {id:8,name:'name8',descn:'descn8'}, {id:9,name:'name9',descn:'descn9'} ]}"); 
    %> 
      </body> 
    </html> 
    应该改为：
    <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> 
      <% 
        response.getWriter().write("{total:100,root1:[{id:0,name:'name0',descn:'descn0'}, {id:1,name:'name1',descn:'descn1'}, {id:2,name:'name2',descn:'descn2'}, {id:3,name:'name3',descn:'descn3'}, {id:4,name:'name4',descn:'descn4'}, {id:5,name:'name5',descn:'descn5'}, {id:6,name:'name6',descn:'descn6'}, {id:7,name:'name7',descn:'descn7'}, {id:8,name:'name8',descn:'descn8'}, {id:9,name:'name9',descn:'descn9'} ]}"); 
    %> 
    这样得到的文本才是Json的形式，非否，你查看源码，得到的不是Json的形式，还带有html的内容。