關於Extjs翻頁問題解決

首先，在前臺JS頁面注意點：

store 文件設置pageSize,total計數屬性和baseParams

detailStore = Ext.extend(Ext.data.JsonStore, {
    constructor: function(cfg) {
        cfg = cfg || {};
        detailStore.superclass.constructor.call(this, Ext.apply({
            autoSave: false,
            autoLoad: false,
            url: '/myProject/mySearch.do',
            root: 'root',
            pruneModifiedRecords: true,
            storeId: 'detailStore',
            fields: [
                {
                    name: 'ord',
                    mapping: 'ord'
                },
                {
                    name: 'line',
                    mapping: 'line'
                
                {
                    name: 'ordqty',
                    mapping: 'ordqty'
                }
            ],
	        pageSize: 30,
	        totalProperty: 'totalCount',
	        baseParams : {
			start : 0,
			limit : 30
		}
        }, cfg));
    }
});
new detailStore();

SearchGrid ，在Button Bar添加paging且設值

               tbar: {
                    xtype: 'toolbar',
                    items: [
                        {
                            xtype: 'button',
                            text: 'Search',
                            width: 100,
                            id: 'btn_search'
                        }
                    ]
                },
               bbar: {
                    xtype: 'paging',
                    store: 'detailStore',
                    pageSize: 30,
                    displayInfo: true
              }

Search時添加監聽方法

Ext.getCmp('btn_search').on('click', this.onClickSearch);

    onClickSearch: function (t, e){
    	
    	if(Ext.getCmp('search-form').getForm().isValid()){
    		var lm = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
    		lm.show();
    		
    		var form = Ext.getCmp("search-form").getForm();
    		var gStore = Ext.getCmp('my-grid').store;
    		gStore.setBaseParam("ord",form.findField("pord").getValue());   //在BaseParam設置查詢參數爲翻頁作準備
    		gStore.setBaseParam("line",form.findField("pline").getValue());
    		
        	Ext.Ajax.request({
        		url:'<span style="font-family: Arial, Helvetica, sans-serif;">/myProject/mySearch.do</span><span style="font-family: Arial, Helvetica, sans-serif;">',</span>
        		timeout:'300000',
        		params:
        		{
        			ord : form.findField("pord").getValue(),
	    			line : form.findField("pline").getValue()

        		},
        		success:function (reponseText,opt){
        			var jstore = Ext.decode(reponseText.responseText);
        			if (null != jstore && "" != jstore) {
        				var grid = Ext.getCmp('my-grid');
        				grid.getStore().loadData(jstore);
        			}
        			lm.hide();
        		},
        		failure:function (reponseText,opt){
        			lm.hide();
        			Ext.Msg.alert('Error', 'Loading failure');
        		}
        	});// end Ext.Ajax.request
		}

	}// end onClickSearch

</pre><p></p><pre>

後臺Java部分：計算Total總數且取Start開始的30條記錄

		JSONArray jsonArray = null;

		int totalCount = bomService.countBomQryDetail(b);  //b是查詢的Bean條件，此處略，該方法得到TotalCount
		
		//page parameters
		int start = parseInteger((String) arg0.getParameter("start"));
		int limit = parseInteger((String) arg0.getParameter("limit"));
		if (limit == 0) limit = 30;
		
		//從start取得30條記錄
		List<MyBean> list = bomService.searchDetail(b, start, limit);
		jsonArray = JSONArray.fromObject(list);

		arg1.setCharacterEncoding("UTF-8");
		arg1.setContentType("text/html");
		arg1.getWriter().print(
				"{totalCount:'" + totalCount + "', root:" + jsonArray + "}");   //返回數據
		arg1.getWriter().flush();