Extjs分页详解

来源:互联网 发布:二甲双胍 知乎 编辑:程序博客网 时间:2024/05/27 19:27
http://blog.sina.com.cn/s/blog_77e940bd01010ov8.html

相信不少刚学Extjs的都会在分页那里感到头疼,网上一大堆例子,找不到一个能说明白是怎样去操作数据库的。下面我来跟大家详解一下:
<script type="text/javascript">
    Ext.onReady(function () {
            Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget = 'side';
           var reader=new Ext.data.JsonReader({
              root: 'data',
              totalProperty: 'count',
              id:'candidateNo',
           },[{name:'name'},
              {name:'candidateNo'},
              {name:'score'},
              {name:'positionId'},
              {name:'rank'}         
              ]);
            var ds = new Ext.data.Store({
                proxy: new Ext.data.HttpProxy({
                    url: "<%=request.getContextPath()%>/servlet/jsonServlet?                         positionId=${param.positionId}", method: 'POST', jsonData: { CurPageIndex: 0 }
                }),
                reader: reader,
            });
            var Colnum = new Ext.grid.ColumnModel([
              {header:'名字',dataIndex:'name'},
              {header:'准考证号',dataIndex:'candidateNo'},
              {header:'分数',dataIndex:'score'},
            {header:'职位代码',dataIndex:'positionId'},
            {header:'名次',dataIndex:'rank'}
            ]);
            var pagebar = new Ext.PagingToolbar({
                pageSize: 10,
                store: ds,
                displayInfo: true,
                displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
                emptyMsg: "没有记录"
            });
            var grid = new Ext.grid.GridPanel({
                renderTo: 'grid',
                autoHeight: true,
                width:500,
                store: ds,
                cm: Colnum,
                viewConfig: {
                    autoFill: true
                },
                bbar: pagebar
            });
            ds.load({ params: { start: 0, limit: 10} });
        });
</script>
重点:Extjs的分页,跟我们通常做的分页原理是一样的,就是往后台传递页码和单页显示条目数量,只不过Extjs传递的是start和limit两个参数。当你点击下一页/上一页时,Extjs自动向后台传递,不用你操心。start代表的是要显示的页码上面的第一个条目在总条目中的index(也就是排第几个),而limit就是每页要显示的条目数量。我们如何获得这两个参数呢?很简单,通过request.getParameter("start");就可以获得。然后我们可以再根据实际情况计算出页码。比如:pageNow = start/limit + 1 就是要显示的页码,再根据pageNow去数据库获取需要的数据。一般我们会有一个方法可以根据页码从数据库取数据的方法:如:public List<?> findbyPage(int pageNow,int pageSize);还有一点需要注意的是:ds.load({ params: { start: 0, limit: 10} });里面statr和limit是第一次请求时向后台传的数据,如果不写,第一次请求时后台取到的start和limit为null,所以如果你在后台有把取到的start转为int的话就会抛异常了。

前一篇:android权限总结(三)
0 0
原创粉丝点击