关于Ext.grid.Panel显示远程数据无法加载问题的解决

来源：互联网发布：下载阿里旺旺淘宝网编辑：程序博客网时间：2024/06/04 20:06

这是书上的例子，但是就是显示不了。其实该问题实质是JSON的应用问题，说细点就是org.JSON 和net.sf.json 库的使用问题。

Ext.grid.Panel_remote.html文件：

<!DOCTYPE html>
<html>
<head>
<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 使用远程数据创建表格 </title>

<link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="extjs/ext-all.js">
</script>

<script type="text/javascript" src="extjs/ext-lang-zh_CN.js">
</script>
</head>
<body>
<script type="text/javascript">

Ext.onReady(function(){

Ext.define('Book', {
  extend: 'Ext.data.Model',
  fields: [
   {name: 'id' , type: 'int'},
   {name: 'name', type: 'string'},
   {name: 'author', type: 'string'},
   {name: 'price', type: 'float'},
  ]
});
// 创建一个Ext.data.Store对象
var bookStore = Ext.create('Ext.data.Store',
{
  // 指定使用Book Model管理记录
  model: 'Book',
  // 使用proxy指定加载远程数据
  proxy:
  {
   type: 'ajax',
   url: 'getAllBooks',// 向该URL发送Ajax请求
   reader: { // 使用Ext.data.reader.Json读取服务器数据
    type: 'json',
    root: 'data' // 直接读取服务器响应的data数据
   },
  },
  autoLoad:true// 自动加载服务器数据
});

Ext.create('Ext.grid.Panel', {
  title: '查看服务器端图书',
  width: 550, // 指定表单宽度
  renderTo: Ext.getBody(),
  // 定义该表格包含的所有数据列
  columns: [
   { text: '图书ID', dataIndex: 'id' , flex: 1 }, // 第1个数据列
   { text: '书名', dataIndex: 'name' , flex: 1 }, // 第2个数据列
   { text: '作者', dataIndex: 'author', flex: 1 }, // 第3个数据列
   { text: '价格', dataIndex: 'price' , flex: 1 }, // 第4个数据列
  ],
  store: bookStore

});
});
</script>
</body>
</html>

后台分三个文件： GetAllBooksServlet.java, BookService.java, Book.java

GetBookServlet.java如下：

package extjs.web;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.*;

import extjs.service.BookService;

/**
* Description:
* @version 1.0
*/
@WebServlet(urlPatterns="/getAllBooks")
public class GetAllBooksServlet extends HttpServlet
{
public void service(HttpServletRequest request ,
  HttpServletResponse response)
  throws IOException , ServletException
{
  Map<String , Object> result = new HashMap<>();
  result.put("success" , true);
  // 调用业务逻辑组件的方法，获取数据，并设置成data属性
  result.put("data" , new BookService().getAllBooks());
  // 准备输出服务器响应
  response.setContentType("text/html;charset=utf-8");
  PrintWriter out = response.getWriter();
  // 将Map包装成JSONObject后输出
  out.print(new JSONObject(result));
}
}

BookService.java如下：

package extjs.service;

import extjs.domain.*;
import java.util.*;

/**
* Description:
* @version 1.0
*/

public class BookService
{
// 使用List集合模拟内存中的数据库
static Map<Category , List<Book>> bookDb = new LinkedHashMap<>();
static
{
  List<Book> books = new ArrayList<Book>();
  books.add(new Book(1, "疯狂Java讲义" ,"李刚" ,109));
  books.add(new Book(2, "疯狂Android讲义" ,"李刚" ,89));
  books.add(new Book(3, "疯狂Ajax讲义" ,"李刚" ,69));
  bookDb.put(new Category(1 , "编程图书") , books);
  books = new ArrayList<Book>();
  books.add(new Book(4, "西游记" ,"吴承恩" ,21));
  books.add(new Book(5, "三国演义" ,"罗贯中" ,18));
  bookDb.put(new Category(2 , "小说") , books);
  books = new ArrayList<Book>();
  books.add(new Book(6, "乌合之众" ,"古斯塔夫·勒庞" ,22));
  books.add(new Book(7, "南华经" ,"庄子" ,14));
  bookDb.put(new Category(3 , "哲学类") , books);
}
public Book getBookById(int id)
{
  for(List<Book> books : bookDb.values())
  {
   for(Book book : books)
   {
    if(book.getId() == id)
    {
     return book;
    }
   }
  }
  return null;
}

public List<Book> getAllBooks()
{
  List<Book> result = new ArrayList<>();
  for(List<Book> books : bookDb.values())
  {
   result.addAll(books);
  }
  return result;
}

public List<Book> getBooksByPage(int start , int page , int limit)
{
  List<Book> allBooks = getAllBooks();
  int toIndex = page * limit < allBooks.size() ? page * limit : allBooks.size();
  return allBooks.subList(start , toIndex);
}

public List<Book> getBooksByPrefix(String prefix)
{
  List<Book> result = new ArrayList<>();
  for(List<Book> books : bookDb.values())
  {
   for (Book book : books )
   {
    if(book.getName().startsWith(prefix))
    {
     result.add(book);
    }
   }
  }
  return result;
}

public int getBookCount()
{
return getAllBooks().size();
}

public Set<Category> getAllCategorys()
{
return bookDb.keySet();
}

public List<Book> getBooksByCategory(int categoryId)
{
  for(Category category : bookDb.keySet())
  {
   if(category.getId() == categoryId)
   {
    return bookDb.get(category);
   }
  }
  return null;
}
public boolean updateBook(int id , String name
  , String author, double price)
{
  for(List<Book> books : bookDb.values())
  {
   for (Book book : books )
   {
    if(book.getId() == id)
    {
     book.setName(name);
     book.setAuthor(author);
     book.setPrice(price);
     return true;
    }
   }
  }
  return false;
}

public boolean deleteBook(int id)
{
  for(List<Book> books : bookDb.values())
  {
   for (Book book : books )
   {
    if(book.getId() == id)
    {
     books.remove(book);
     return true;
    }
   }
  }
  return false;
}
}

Book.java如下：

package extjs.domain;

/**
* Description:

* @version 1.0
*/

public class Book
{
private Integer id;
private String name;
private String author;
private double price;

// 无参数的构造器
public Book()
{
}
// 初始化全部成员变量的构造器
public Book(Integer id , String name , String author , double price)
{
  this.id = id;
  this.name = name;
  this.author = author;
  this.price = price;
}

// id的setter和getter方法
public void setId(Integer id)
{
this.id = id;
}
public Integer getId()
{
return this.id;
}

// name的setter和getter方法
public void setName(String name)
{
this.name = name;
}
public String getName()
{
return this.name;
}

// author的setter和getter方法
public void setAuthor(String author)
{
this.author = author;
}
public String getAuthor()
{
return this.author;
}

// price的setter和getter方法
public void setPrice(double price)
{
this.price = price;
}
public double getPrice()
{
return this.price;
}

public String toString()
{
return "Book[name=" + name+ "]";
}
}

上面的例子Extjs4.1运用后一直在加载，貌似一切合理就是显示不出来，经过逐步排查发现问题出在GetAllBooksServlet.java文件。

原因是按书上所述引用import org.JSON.JSONObject 无法把字符串转成JSON串。JSONObject.fromObject( )函数能转成JSON，但在org.JSON.JSONObject包中找不到此函数，引入 net.sf.json.JSONObject能查到此文件，但需要改动project文件配置和添加一些库文件。

解决从两方面入手：

第一，修改配置和添加一些JSON库文件

2）右击project文件-->Properties-->Java Complier-->选用JavaSE-1.7编译环境

3）右击project文件-->properties-->Java Build Path-->Libraies-->击JRE System Library-->选用Exection environment为JavaSE-1.7(jdk1.7.0_15)

4）右击project文件-->Build path-->Configure Build Path-->liberaies-->Add External JARs添加如下6个文件：

commons-lang-2.3.jar

commons-logging-1.0.4.jar

commons-beanutils-1.6.jar

commons-collections.3.2.jar

ezmorph-1.0.4.jar

json-lib-2.2.1-jdk15.jar

第二，修改GetAllBooksServlet.java文件：

1）把import org.json.*; 改为import net.sf.json.JSONObject;

2）修改后的GetAllBooksServlet.java文件如下：

@WebServlet(urlPatterns="/getAllBooks")
public class GetAllBooksServlet extends HttpServlet {
public void service(HttpServletRequest request ,
   HttpServletResponse response)
   throws IOException , ServletException
  {
   Map<String , Object> result = new HashMap<>();
   result.put("success" , true);
   // 调用业务逻辑组件的方法，获取数据，并设置成data属性
   result.put("data" , new BookService().getAllBooks());

   // 准备输出服务器响应
   response.setContentType("text/html;charset=utf-8");
   //response.setContentType("application/json;charset=UTF-8");

   JSONObject json = JSONObject.fromObject( result.toString() );
   PrintWriter out = response.getWriter();

   //out.print(json);
   out.write(json.toString());

  }
}

0 0