生活随笔
收集整理的這篇文章主要介紹了
用Ext-4.2简单实现分页效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
只要配置好路徑和對(duì)應(yīng)的包，代碼直接能用！
效果如圖：
首先是JSON數(shù)據(jù)：
模擬表格要加載的內(nèi)容
[{"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",}
]
代碼實(shí)現(xiàn):
<%@ 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>分頁(yè)</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對(duì)象，用于訪問數(shù)據(jù)對(duì)象。type: 'ajax', url: 'js/pagingstore.js', // url that will load data with respect to start and limit params reader: { 處理數(shù)據(jù)對(duì)象的DataReader會(huì)返回一個(gè)Ext.data.Record對(duì)象的數(shù)組。其中的id屬性會(huì)是一個(gè)緩沖了的鍵。type: 'json', root: 'items', totalProperty: 'total' } } }); // specify segment of data you want to load using params//使用params指定要加載的數(shù)據(jù)段store.load({ params:{ start:0, limit: itemsPerPage } }); Ext.create('Ext.grid.Panel', { title: '個(gè)人信息', store: store, columns: [ { header: '姓名', dataIndex: 'name' }, { header: '郵箱', dataIndex: 'email', flex: 1 }, { header: '手機(jī)', 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>
總結(jié)
以上是生活随笔為你收集整理的用Ext-4.2简单实现分页效果的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
