关于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:'/myProject/mySearch.do',
        		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

后台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 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();



你可能感兴趣的:(关于Extjs翻页问题解决)