Question

当我选择菜单时，我希望Extjs可以从servlet加载数据。我调试了，应该将正确的数据传递给脚本，但它不起作用。我在这篇文章中附上了所有相关的代码。请帮忙！

<!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> Using Ext.form.action.Load to load data </title>
	<!-- impot Ext JS CSS -->
	<link href="extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
	<!-- import Ext JS JavaScript lib -->
	<script type="text/javascript" src="extjs/ext-all.js">
	</script>
	<!-- import Ext JS JavaScript language -->
	<script type="text/javascript" src="extjs/ext-lang-zh_CN.js">
	</script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function(){
	var itemHandler = function(item, e)
	{
		Ext.getCmp('bookForm').load(
		{
			params: {
				bookId: item.value
			},
			
			failure: function(form, action)
			{
				Ext.Msg.alert('Load Failure', action.result 
					? action.result.msg : "The server has problem");
			}
		});
	}
	
	Ext.create('Ext.form.Panel', {
		id:'bookForm',
		title: 'Using Ext.form.action.Load to load Form data',
		bodyPadding: 5,
		width: 350, 	
		url: '/AjaxBookExtjs/getBook',
		method: 'POST', 
		layout: 'anchor',
		defaults: {
			anchor: '100%'
		},
		defaultType: 'textfield',
		fieldDefaults: {
			labelAlign: 'left',
			labelWidth: 100
		},
		items: [
			{
				fieldLabel: 'Book Name',
				name: 'name', 
				readOnly: true, 
			},
			{
				fieldLabel: 'Author', 
				name: 'author',
				readOnly: true, 
			},
			{
				fieldLabel: 'Price', 
				name: 'price', 
				readOnly: true, 
			}
		],
		bbar: [
			{xtype: 'tbfill'},
			{
				text: "Select Book",
				xtype: 'splitbutton',
				width: 100,
				menu: [ 
					{text:'Book1' , value:1 , handler: itemHandler},
					{text:'Book2' , value:2 , handler: itemHandler},
					{text:'Book3' , value:3 , handler: itemHandler},
					{text:'Book4' , value:4 , handler: itemHandler}
				]
			}
		],
		renderTo: Ext.getBody()
	});
});
</script>
</body>
</html>

package org.crazyit.extjs.service;

import org.crazyit.extjs.domain.*;
import java.util.*;

public class BookService
{
	static Map<Category , List<Book>> bookDb = new LinkedHashMap<>();
	static
	{
		List<Book> books = new ArrayList<Book>();
		books.add(new Book(1, "Book 101" ,"Li Gang" ,109));
		books.add(new Book(2, "Book 102" ,"Li Gang" ,89));
		books.add(new Book(3, "Book 103" ,"Li Gang" ,69));
		bookDb.put(new Category(1 , "IT Books") , books);
		books = new ArrayList<Book>();
		books.add(new Book(4, "Book 201" ,"AAA" ,21));
		books.add(new Book(5, "Book 202" ,"BBB" ,18));
		bookDb.put(new Category(2 , "Novel") , books);
		books = new ArrayList<Book>();
		books.add(new Book(6, "Book 301" ,"CCC" ,22));
		books.add(new Book(7, "Book 302" ,"DDD" ,14));
		bookDb.put(new Category(3 , "Research") , 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;
	}
}

package org.crazyit.extjs.domain;


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;
	}


	public void setId(Integer id)
	{
		this.id = id;
	}
	public Integer getId()
	{
		return this.id;
	}


	public void setName(String name)
	{
		this.name = name;
	}
	public String getName()
	{
		return this.name;
	}


	public void setAuthor(String author)
	{
		this.author = author;
	}
	public String getAuthor()
	{
		return this.author;
	}


	public void setPrice(double price)
	{
		this.price = price;
	}
	public double getPrice()
	{
		return this.price;
	}

	public String toString()
	{
		return "Book[name=" + name+ "]";
	}
}

package org.crazyit.extjs.web;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;

import java.io.*;
import java.util.*;

import org.json.*;
import org.json.simple.JSONObject;
import org.crazyit.extjs.service.*;

@WebServlet(urlPatterns="/getBook")
public class GetBookServlet extends HttpServlet
{
	public void service(HttpServletRequest request ,
		HttpServletResponse response)
		throws IOException , ServletException
	{
		
		request.setCharacterEncoding("utf-8");
		String bookId = request.getParameter("bookId");
		Map<String , Object> result = new HashMap<>();
		result.put("success" , true);
		result.put("data" , new BookService().getBookById(Integer.parseInt(bookId)));
		response.setContentType("text/html;charset=utf-8");
		PrintWriter out = response.getWriter();
		out.print(new JSONObject(result));
	}
}

Extjs无法使用load（）方法从服务器端加载数据

0 个答案: