使用ExtJs 來顯示數據，並實現數據的分頁功能

既然剛剛已經學到了使用ajax來異步請求後臺數據庫得到json數據，那幾今天就跳轉到Extjs，也是一個強大的javascript庫，之所以強大，完全是因爲他提供了一套實用ui界面，其中最常用的顯示控件就是gridPanel ，所以今天就學習一下怎樣使用gridPanel來完成數據的分頁顯示。

1，首先定義好用來顯示的實體：

package edu.hue.jk.bean;

import javax.persistence.*;

@Entity
@Table(name="tb_book")
public class Book {
	private int bookId;
	private String bookName;
	private String bookAuthor;
	private double bookPrice;
	@Id
	@GeneratedValue
	@Column(name="book_id")
	public int getBookId() {
		return bookId;
	}
	@Column(name="book_name")
	public String getBookName() {
		return bookName;
	}
	@Column(name="book_author")
	public String getBookAuthor() {
		return bookAuthor;
	}
	@Column(name="book_price")
	public double getBookPrice() {
		return bookPrice;
	}
	public void setBookId(int bookId) {
		this.bookId = bookId;
	}
	public void setBookName(String bookName) {
		this.bookName = bookName;
	}
	public void setBookAuthor(String bookAuthor) {
		this.bookAuthor = bookAuthor;
	}
	public void setBookPrice(double bookPrice) {
		this.bookPrice = bookPrice;
	}
	public Book() {
		super();
		// TODO Auto-generated constructor stub
	}
	public Book(String bookName, String bookAuthor, double bookPrice) {
		super();
		this.bookName = bookName;
		this.bookAuthor = bookAuthor;
		this.bookPrice = bookPrice;
	}
	
	
}

2，使用Hibernate 實現數據庫的相關操作，這裏只做了總數查詢和 分頁查詢

import java.sql.SQLException;
import java.util.LinkedList;
import java.util.List;

import org.hibernate.HibernateException;
import org.hibernate.Session;
import org.springframework.orm.hibernate3.HibernateCallback;
import org.springframework.orm.hibernate3.support.HibernateDaoSupport;

import edu.hue.jk.bean.Book;
public class BookDao extends HibernateDaoSupport{  // 添加分頁查詢的功能
	public void addBook(Book book){
		getHibernateTemplate().save(book);
		
	}
	/***
	 * 得到所有圖書的數目
	 * @return
	 */
	public long getBookNunber(){  
		return (Long)getHibernateTemplate().find(" select Count(*) from Book").get(0);
		
	}
	public List<Book> getBookByPage( final int start,final int page, final int limit){
		List<Book> books=new LinkedList<Book>();
		books=getHibernateTemplate().executeFind(new HibernateCallback<Object>() {
			public Object doInHibernate(Session session) throws HibernateException,
					SQLException {
				List<Book> result=(List<Book>)session.createQuery("from Book").setFirstResult(start).setMaxResults(limit).list();
				return result;
			}
			
		});
		return books;
	}
}

3，使用extjs編寫前臺的顯示：

Ext.onReady(function(){
	 Ext.define('Book', {      //定義一個Book 的model
	     extend: 'Ext.data.Model',
	     fields: [
	         {name: 'bookId', type: 'int'},
	         {name: 'bookName',  type: 'string'},
	         {name: 'bookAuthor', type: 'string'},
	         {name: 'bookPrice',  type: 'float'}
	     ]
	 });
	 var bookStore = new Ext.data.JsonStore({
		    // store configs
		    autoDestroy: true,
		    model: 'Book',  //使用哪個模型來創建store
		    pageSize:3,  //用來顯示分頁使用，每頁顯示3條數據
		    proxy: {  //使用 proxy來遠程加載數據
		        type: 'ajax',
		        url: 'getBooksAction',
		        reader: {
		            type: 'json',
		            root: 'books',
		            totalProperty: 'total'   //總共有多少條記錄
		            	//返回的數據格式爲：
		         //{"total":9,"books":[{"bookAuthor":"馬士兵","bookId":1,"bookPrice":12.5,"bookName":"book1"},{"bookAuthor":"馬士兵2","bookId":2,"bookPrice":14.5,"bookName":"book2"},{"bookAuthor":"馬士兵3","bookId":3,"bookPrice":15.5,"bookName":"book3"}
		        }
		    },
		    autoLoad:true    // store 初始化自動加載數據
	 });
	 
	 
	 var bookGrid= Ext.create('Ext.grid.Panel', {
			    title: '查看服務器端圖書情況',
			    store: bookStore,
			    columns: [
			        { header: 'bookId',  dataIndex: 'bookId' },
			        { header: 'bookName', dataIndex: 'bookName', flex: 1 },
			        { header: 'bookAuthor', dataIndex: 'bookAuthor'},
			        { header: 'bookPrice', dataIndex: 'bookPrice' }
			    ],
			    height: 200,
			    width: 400,
			    renderTo: Ext.getBody(),
			    bbar:{              //添加分頁工具欄
			    	id:'pageBar',
			    	xtype:'pagingtoolbar',
			    	region:'south',
			    	store:bookStore,   // 指定分頁的store對象
			    	displayInfo:true,
			    	emptyMsg:"沒有記錄",
//			    	listeners:{
//			    		change: function (paging,pageData){
//			    			Ext.getCmp('books_combo').reset();
//			    		}
//			    	}
			    	
			    }
			});
});

4，完成action代碼，這裏我使用了spring的  注入功能：

@Component
public class GetBooksAction extends ActionSupport {
	private JSONObject result;   // 等義返回的數據類型，爲json數據
	private String start;    // grid在實現分頁時每次異步請求都會向服務器提交三個參數  start 表示從那條記錄開始
	private String page;     // 當前是第幾頁
	private String limit;    // 每頁顯示多少條記錄
	private BookDao bookDao;
	
	public BookDao getBookDao() {
		return bookDao;
	}
	@Resource
	public void setBookDao(BookDao bookDao) {
		this.bookDao = bookDao;
	}
	public String getStart() {
		return start;
	}
	public String getPage() {
		return page;
	}
	public String getLimit() {
		return limit;
	}
	public void setStart(String start) {
		this.start = start;
	}
	public void setPage(String page) {
		this.page = page;
	}
	public void setLimit(String limit) {
		this.limit = limit;
	}
	
	public JSONObject getResult() {
		return result;
	}
	public void setResult(JSONObject result) {
		this.result = result;
	}
	@Override
	public String execute() throws Exception {
		int pageStart=Integer.parseInt(start);
		int pageSize=Integer.parseInt(limit);
		Map<String,Object> map=new HashMap<String,Object>();
		List<Book> books=bookDao.getBookByPage(pageStart, 2, pageSize);  // 根據當前的頁號數和每頁的顯示數進行分頁查詢
		map.put("books", books);   
		map.put("total", bookDao.getBookNunber());
		result=JSONObject.fromObject(map);  // 將得到的結果封裝成json數據返回
		
		System.out.println(result);
		return super.execute();
	}
	
}

5，注意action的配置，以及到的配置：

action：

<struts>
	<package name="bookservice" extends="json-default">
		<action name="getBooksAction" class="edu.hue.jk.action.GetBooksAction">
			<result type="json">
				<param name="root">result</param>
			</result>
		</action>
	</package>
</struts>    

因爲BookDao繼承了 HibernateDaoSupport 所以配置文件中要有：

<bean id="bookDao" class="edu.hue.jk.dao.BookDao">
		<property name="sessionFactory" ref="sessionFactory"></property>
	</bean>

查看實驗結果：

第一頁，由於我用了中文，又沒有導入漢化的js文件，導致了亂碼   第一頁：

第二頁：

查看extjs 請求分頁時的數據格式：

 

查看返回的json  數據格式：