### Extjs4 Grid分页与自动刷新
#### 一、Extjs4 Grid 分页功能实现
在使用Extjs4进行Web应用开发时，Grid控件是常用的数据展示组件之一。对于大数据量的情况，通常需要使用分页来提高用户体验。下面详细介绍如何在Extjs4中实现Grid的分页功能。
**1.1 创建数据存储（Store）**
首先需要创建一个`Ext.data.Store`实例，这是Extjs中用于存储和管理数据的核心对象。在创建Store时，需要设置分页参数`pageSize`以控制每页显示的数据数量，并定义模型（Model）以及数据代理（Proxy）等配置。
```javascript
var store = Ext.create('Ext.data.Store', {
pageSize: 10, // 设置每页显示的数据数量
model: 'ForumThread', // 定义模型名称
remoteSort: true, // 允许远程排序
proxy: new Ext.data.HttpProxy({ // 数据代理
type: 'jsonp', // 使用JSONP方式获取数据
url: 'order/exceptionAction', // 获取数据的URL
reader: { // 数据读取器配置
root: 'topics', // JSON数据中的根节点
totalProperty: 'totalCount' // 总记录数的属性名
},
simpleSortMode: true // 简单排序模式
}),
sorters: [{ // 排序规则
property: 'deviceno', // 按deviceno字段排序
direction: 'DESC' // 降序排列
}]
});
```
**1.2 创建Grid**
接下来创建Grid控件并将其绑定到上面创建的数据存储上。
```javascript
var grid = Ext.create('Ext.grid.Panel', {
title: '论坛帖子列表',
store: store, // 绑定数据存储
columns: [ // 定义列配置
{ text: '设备编号', dataIndex: 'deviceno', flex: 1 },
{ text: '标题', dataIndex: 'title', flex: 2 },
{ text: '发布时间', dataIndex: 'posttime', flex: 1 }
],
dockedItems: [ // 定义停靠项
{
xtype: 'pagingtoolbar', // 分页工具栏
store: store, // 绑定数据存储
dock: 'bottom', // 停靠底部
displayInfo: true // 显示总记录数信息
}
]
});
```
#### 二、Extjs4 Grid 自动刷新机制
除了基本的分页功能外，有时还需要让Grid能够自动刷新数据以保持最新状态。这可以通过定时任务或监听某些事件来实现。
**2.1 使用定时器**
可以通过设置定时器来定期刷新Grid中的数据。
```javascript
function refreshGrid() {
store.loadPage(1); // 重新加载第一页数据
}
// 设置每5秒刷新一次
setInterval(refreshGrid, 5000);
```
**2.2 监听特定事件**
如果需要根据某些特定事件来触发Grid的刷新，可以使用事件监听的方式。
```javascript
// 假设有一个按钮，点击时刷新Grid
var refreshBtn = Ext.create('Ext.button.Button', {
text: '刷新',
handler: function() {
store.loadPage(1); // 刷新Grid
}
});
// 将按钮添加到视口
Ext.create('Ext.Viewport', {
layout: 'fit',
items: [
grid,
refreshBtn
]
});
```
#### 三、综合案例分析
结合以上两部分的内容，我们可以构建一个更完整的示例代码：
```javascript
Ext.onReady(function() {
var store = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'ForumThread',
remoteSort: true,
proxy: new Ext.data.HttpProxy({
type: 'jsonp',
url: 'order/exceptionAction',
reader: {
root: 'topics',
totalProperty: 'totalCount'
},
simpleSortMode: true
}),
sorters: [{
property: 'deviceno',
direction: 'DESC'
}]
});
var grid = Ext.create('Ext.grid.Panel', {
title: '论坛帖子列表',
store: store,
columns: [
{ text: '设备编号', dataIndex: 'deviceno', flex: 1 },
{ text: '标题', dataIndex: 'title', flex: 2 },
{ text: '发布时间', dataIndex: 'posttime', flex: 1 }
],
dockedItems: [{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: true
}]
});
function refreshGrid() {
store.loadPage(1);
}
setInterval(refreshGrid, 5000);
Ext.create('Ext.Viewport', {
layout: 'fit',
items: [grid]
});
});
```
通过上述代码，我们不仅实现了Grid的基本分页功能，还添加了自动刷新机制，使得Grid能够在保持最新数据的同时为用户提供良好的交互体验。
```
- 1
- 2
- 3
- 4
前往页