关于Extjs翻页问题解决

来源：互联网发布：php class 魔术方法编辑：程序博客网时间：2024/05/17 21:54

首先，在前台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 parametersint 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();

1 0