ExtJS菜鸟提问...

自己想写一个ExtJS+Servlet+Json的小例子，直接上代码：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Ext08</title>
    <link rel="stylesheet" type="text/css" href="js/ext/resources/css/ext-all.css" />  
<script type="text/javascript" src="js/ext/adapter/ext/ext-base.js"></script>  
<script type="text/javascript" src="js/ext/ext-all.js"></script> 
<script type="text/javascript">
Ext.onReady(function() {
//定义Proxy
var proxy = new Ext.data.HttpProxy({
method : 'GET',
url:'display.do'
});

var reader = new Ext.data.JsonReader({
id : 'id',
fields : [
{name : '姓名',type:'string'},
{name : '年龄',type : 'int'}
]
});

var store = new Ext.data.SimpleStore({
reader:reader,
proxy:proxy
});

var cm = new Ext.grid.ColumnModel([
{header:'姓名',width:160,hidden:false,dataIndx:'姓名'},
{header:'年龄',width:120,hidden:false,dataIndx:'年龄'}
]);

var grid = new Ext.grid.GridPanel({
store:store,
cm:cm,
frame:true,
width:600,
height:300,
renderTo:'mxContainer'
});

store.load({
callback:function(r,options,success){
if(sucess == false) {
Ext.Msg.alert('Error!!!');
}
}
});

});
</script>
  </head>
  
  <body>
   <div id="mxContainer"></div>
  </body>
</html>
Servlet：
package org.whatisjava.web;import java.io.IOException;
import java.util.ArrayList;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;import org.whatisjava.model.Person;public class JSONServlet extends HttpServlet { @Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
// String jsonData = "[{name:'易海建',age:23}]";
Person p1 = new Person();
p1.setId(1234L);
p1.setName("易海建");
p1.setAge(23);
Person p2 = new Person();
p2.setId(1235L);
p2.setName("张三");
p2.setAge(27);
List persons = new ArrayList();
persons.add(p1); persons.add(p2);
JSONArray array = JSONArray.fromObject(persons);
response.setCharacterEncoding("UTF-8");
response.getWriter().println(array.toString());
} @Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
} @Override
public void destroy() {
// TODO Auto-generated method stub
super.destroy();
} @Override
public void init() throws ServletException {
// TODO Auto-generated method stub
super.init();
}}web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4" 
xmlns="http://java.sun.com/xml/ns/j2ee" 
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee 
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">

  <servlet>
   <servlet-name>json</servlet-name>
   <servlet-class>org.whatisjava.web.JSONServlet</servlet-class>
  </servlet>
  <servlet-mapping>
   <servlet-name>json</servlet-name>
   <url-pattern>/display.do</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>Person类我就不列出来了，
是不是HttpProxy的URL不对啊，界面总是获取不到JSON的返回值,报错信息是length为空或不是对象？
请熟悉ExtJS的大侠帮忙分析下程序

解决方案 »

  1.   

    display.do只能返回以下格式的json数据，不能包含其他HTMl代码.
    array.toString获得的不是JSON格式的数据，要遍历数组，将数据拼装成：
    {
        totalCount:2,
        result:[
            {id:'1234L',name:'易海建',age:23},
            {id:'1235L',name:'张三',age:27}
        ]
    }<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="extjs/ext-all.js"></script>
    <script>
    Ext.onReady(function(){
        var record = Ext.data.Record.create([
            {name: 'name', type: 'string'},
            {name: 'age', type: 'int'}
        ]);    var store = new Ext.data.Store({
            proxy: new Ext.data.HttpProxy({url:'display.do'}),
            reader: new Ext.data.JsonReader({
                totalProperty: 'totalCount',
                root: 'result'
            },record)
        });
        store.load();    var columns = new Ext.grid.ColumnModel([
            {header: '姓名', dataIndex: 'name'},
            {header: '年龄', dataIndex: 'age'}
        ]);    var grid = new Ext.grid.GridPanel({
            store: store,
            cm: columns,
            autoHeight:true,
    renderTo:'mxContainer'
        });});
    </script>
    <div id="mxContainer"></div>
      

  2.   

     var reader = new Ext.data.JsonReader({
                    id : 'id',
                    fields : [
                        {name : '姓名',type:'string'},
                        {name : '年龄',type : 'int'}
                    ]
                });
    姓名 应该改为name,年龄改为age
      

  3.   

    还是不行啊 还是报那个错
    我在后台设断点都没进去，方法没有执行
    我的url写得也没错啊 ，真是郁闷！！！
      

  4.   

    HTML代码改了很多地方，3楼的拷贝下来即可。
    主要是 action里返回的json格式要正确.
    以上代码测试过，可以的.
      

  5.   

    三楼的页面是对的，你的后台错了，把persons改成result 然后在JSON语句中再加上一个属性，就是数据的个数。