好記性不如爛筆頭，現在每次碰見問題和覺得應該記錄下來的東西都會保持寫博客的習慣，今后再次碰見這種問題，就不用把時間浪費了。

這段時間用ExtJS用的多一點,前段時間碰見的分頁問題，今天做個筆記吧。

為了簡單明了，此project使用的是servlet的方式，如果你使用的是struts2或者spring MVC，則相應的改變成對于方式就可以了。

首先在頁面引入ext所不要的文件，這個自然不必多說了吧，另外為了整個項目清晰明了，EXTJS代碼也最好和JSP頁面（當然了，你也有可能使用的模板，同理，這我就不必多說了）分開，那就新建一個app.js，在JSP頁面中也需要引入進來.

PS(這里的JSON解析我使用了GSON，可以參考 https://code.google.com/p/google-gson/ )

下面是app.js的代碼：

    Ext.onReady(function() {
	var pageSize = 5;
	var proxyData = new Ext.data.HttpProxy({url:'getJson'});
	var render = new Ext.data.JsonReader({root:'data',totalProperty: 'totalCount'},[{  
         name : 'id',  
         type : 'int'
     	},{  
         name : 'name',
         type: 'string' 
     	},{  
         name : 'borth',  
         type : 'date'
     	}]);
    var ds = new Ext.data.Store({
        proxy : proxyData,  
		reader : render
    });
    
    var cm = new Ext.grid.ColumnModel([
         new Ext.grid.RowNumberer(),
        { header: '序號', dataIndex: 'id',width:15 },
        { header: '姓名', dataIndex: 'name',width:30 },
        { header: '生日', dataIndex: 'borth',
        	width:55 ,
        	sortable: true,  
  			renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s') }
    ]);
    cm.defaultSortable = true;
    ds.load({params:{start:0,limit:pageSize}});
    
    var grid = new Ext.grid.GridPanel({
        loadMask : {msg:'正在加載數據,請稍等......'},
        store: ds,
        layout:'fit',
        cm: cm,
        height:300,
        renderTo:Ext.getBody(),
		title:'<center>人員信息</center>',
        viewConfig: {
            forceFit: true
        },
        bbar: new Ext.PagingToolbar({
            pageSize: pageSize,
            store: ds,
            displayInfo: true,
            displayMsg: '當前顯示{0} - {1}條，共{2}條數據',
            emptyMsg: "沒有記錄"
        })
    });
});
  

這里要注意 ds.load({params:{start:0,limit:pageSize}});
里面兩個參數大家應該都知道吧？ 這就是我們分頁所需要的數據了,
下面是servlet類，為了節約空間，只貼出doPost方法，詳細源文件請下載底部的壓縮包

    public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		int start = Integer.valueOf(request.getParameter("start"));
		int limit = Integer.valueOf(request.getParameter("limit"));

		String jsonStr = null;
		Map<String, Object> jsonObj = new HashMap<String, Object>();
		List<Person> persons = new ArrayList<Person>();
		int totalCount = 20;
		for (int i = 1; i <= totalCount; i++) {
			Person p = new Person(i, "路人" + i, new Date());
			persons.add(p);
		}
		persons = persons.subList(start, limit+start);
		jsonObj.put("data", persons);
		jsonObj.put("totalCount", totalCount);
		response.setContentType("application/x-json");
		response.setCharacterEncoding("UTF-8");
		PrintWriter out = response.getWriter();
		Gson gson = new Gson();
		jsonStr = gson.toJson(jsonObj);
		out.print(jsonStr);
		out.close();
	}
  

好了，有興趣的同學下載壓縮包導入Eclipse看吧。

ExtJS筆記---Grid實現后臺分頁