好記性不如爛筆頭，現(xiàn)在每次碰見(jiàn)問(wèn)題和覺(jué)得應(yīng)該記錄下來(lái)的東西都會(huì)保持寫(xiě)博客的習(xí)慣，今后再次碰見(jiàn)這種問(wèn)題，就不用把時(shí)間浪費(fèi)了。

這段時(shí)間用ExtJS用的多一點(diǎn),前段時(shí)間碰見(jiàn)的分頁(yè)問(wèn)題，今天做個(gè)筆記吧。

為了簡(jiǎn)單明了，此project使用的是servlet的方式，如果你使用的是struts2或者spring MVC，則相應(yīng)的改變成對(duì)于方式就可以了。

首先在頁(yè)面引入ext所不要的文件，這個(gè)自然不必多說(shuō)了吧，另外為了整個(gè)項(xiàng)目清晰明了，EXTJS代碼也最好和JSP頁(yè)面（當(dāng)然了，你也有可能使用的模板，同理，這我就不必多說(shuō)了）分開(kāi)，那就新建一個(gè)app.js，在JSP頁(yè)面中也需要引入進(jìn)來(lái).

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: '序號(hào)', 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:'正在加載數(shù)據(jù),請(qǐng)稍等......'},
        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: '當(dāng)前顯示{0} - {1}條，共{2}條數(shù)據(jù)',
            emptyMsg: "沒(méi)有記錄"
        })
    });
});
  

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

    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();
	}
  

好了，有興趣的同學(xué)下載壓縮包導(dǎo)入Eclipse看吧。

ExtJS筆記---Grid實(shí)現(xiàn)后臺(tái)分頁(yè)