Extjs 通过分页代码,以及具体属性含义
时间: 2024-03-02 20:03:37 浏览: 72
extjs 分页
在ExtJS中,可以通过分页控件(PagingToolbar)来实现分页加载数据。以下是一段示例代码:
```javascript
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'age', 'gender'],
pageSize: 10, // 每页显示的记录数
proxy: {
type: 'ajax',
url: 'data.json', // 数据源地址
reader: {
type: 'json',
rootProperty: 'data', // 数据源中的记录数组名
totalProperty: 'total' // 数据源中的记录总数名
}
},
autoLoad: true // 自动加载数据
});
var grid = Ext.create('Ext.grid.Panel', {
title: '用户列表',
store: store,
columns: [
{text: '姓名', dataIndex: 'name'},
{text: '年龄', dataIndex: 'age'},
{text: '性别', dataIndex: 'gender'}
],
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: '显示第 {0} - {1} 条记录,共 {2} 条',
emptyMsg: '没有记录'
})
});
```
其中,store是数据仓库,proxy是数据源代理,pageSize是每页显示的记录数,autoLoad表示是否自动加载数据。PagingToolbar是分页控件,store是数据仓库,displayInfo表示是否显示记录信息,displayMsg是显示记录信息的格式,emptyMsg是没有记录时显示的提示信息。
在数据源代理中,通过reader的配置可以指定数据源中的记录数组名和记录总数名,以便正确地加载数据和进行分页。
以上是一份简单的示例代码,仅供参考。
阅读全文