用Ext-4.2简单实现分页效果

最新推荐文章于 2018-11-06 10:51:14 发布

starjuly

最新推荐文章于 2018-11-06 10:51:14 发布

阅读量2.7k

点赞数

分类专栏： Ext-4.2 文章标签：前端 Ext-4.2

本文链接：https://blog.csdn.net/starjuly/article/details/54293811

版权

Ext-4.2 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

只要配置好路径和对应的包，代码直接能用！

效果如图：

首先是JSON数据：

模拟表格要加载的内容

[
    {
        "name": "Tom",
        "email": "tom11@qq.com",
        "phone": "18323223",
       
    },
    {
        "name": "Mon",
        "email": "22234@qq.com",
        "phone": "2222",
       
    },
    {
        "name": "lily",
        "email": "333@qq.com",
        "phone": "3333243",
       
    },
    {
        "name": "mike",
        "email": "1sdfdsa@qq.com",
        "phone": "3232432368",
       
    },
    {
        "name": "jack",
        "email": "safassjj43@qq.com",
        "phone": "5323423",
       
    },
    {
        "name": "Tom",
        "email": "tom11@qq.com",
        "phone": "132489942",
       
    },
    {
        "name": "Mon",
        "email": "22234@qq.com",
        "phone": "1345722522",
       
    },
    {
        "name": "lily",
        "email": "333@qq.com",
        "phone": "3333243",
       
    },
    {
        "name": "mike",
        "email": "1sdfdsa@qq.com",
        "phone": "3232432368",
       
    },
    {
        "name": "jack",
        "email": "safassjj43@qq.com",
        "phone": "5323423",
       
    }
]

代码实现:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%--ext-all-neptune.css不支持IE6 --%>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/common/ext-4.2.1/resources/css/ext-all-neptune.css">
<script src="${pageContext.request.contextPath}/common/ext-4.2.1/ext-all.js"></script>
<script src="${pageContext.request.contextPath}/common/ext-4.2.1/locale/ext-lang-zh_CN.js"></script>
 <script src="${pageContext.request.contextPath}/common/ext-4.2.1/shared/example.css"></script>
<script  type="text/javascript" src="${pageContext.request.contextPath}/common/ext-4.2.1/shared/include-ext.js"></script>
<script  type="text/javascript"  src="${pageContext.request.contextPath}/common/ext-4.2.1/shared/options-toolbar.js"></script>
 <title>分页</title>
<script type="text/javascript">
Ext.onReady(function() {
  // Ext.QuickTips.init();
    var itemsPerPage = 5;   // set the number of items you want per page 
   
    var store = Ext.create('Ext.data.Store', { 
        id:'simpsonsStore', 
        autoLoad: false, 
        fields:['name', 'email', 'phone'], 
        pageSize: itemsPerPage, // items per page 
        proxy: {  //Proxy对象，用于访问数据对象。
            type: 'ajax', 
            url: 'js/pagingstore.js',  // url that will load data with respect to start and limit params 
            reader: {  处理数据对象的DataReader会返回一个Ext.data.Record对象的数组。其中的id属性会是一个缓冲了的键。
                type: 'json', 
                root: 'items', 
                totalProperty: 'total' 
            } 
        } 
    }); 
     
    // specify segment of data you want to load using params
    //使用params指定要加载的数据段
    store.load({ 
        params:{ 
            start:0, 
            limit: itemsPerPage 
        } 
    }); 
     
    Ext.create('Ext.grid.Panel', { 
        title: '个人信息', 
        store: store, 
        columns: [ 
            { header: '姓名',  dataIndex: 'name' }, 
            { header: '邮箱', dataIndex: 'email', flex: 1 }, 
            { header: '手机', dataIndex: 'phone' } 
        ], 
        width: 400, 
        autoHeight: 125, 
        dockedItems: [{ 
            xtype: 'pagingtoolbar', 
            store: store,   // same store GridPanel is using 
            dock: 'bottom', 
            displayInfo: true 
        }], 
        renderTo: Ext.getBody() 
    }); 
});
</script>
</head>
<body>
</body>
</html>