extjs 学习笔记四带分页的grid

下面是针对“EXTJS 学习笔记四 —— 带分页的 Grid”这篇文章的详细攻略。

1. 文章概览

该篇文章主要是介绍如何使用 EXTJS 构建具有分页功能的 Grid 表格。其中，主要介绍以下内容：

引入必要的资源文件
创建分页工具栏
构建 Grid 表格
设置 Grid 表格分页参数

2. 引入必要的资源文件

在使用 EXTJS 构建 Grid 表格时，需要引入 EXTJS 的核心库文件和 Grid 表格的样式文件。具体引入方式可以参考以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>带分页的 Grid 表格</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/extjs/4.2.1/resources/css/ext-all.css">
    <script src="https://cdn.bootcss.com/extjs/4.2.1/ext-all.js"></script>
</head>
<body>
</body>
</html>

3. 创建分页工具栏

在 Grid 表格下方需要创建分页工具栏，可以使用 EXTJS 内置的 PagingToolbar 工具栏。具体示例代码如下：

var pageSize = 20;  // 每页显示的记录数
var store = Ext.create('Ext.data.Store', {
    // ...
    pageSize: pageSize,  // 设置每页显示的记录数
    // ...
});

var pagingToolbar = Ext.create('Ext.PagingToolbar', {
    store: store,
    displayInfo: true,  // 显示“显示第 x 条到第 y 条记录，共 z 条”的信息
    displayMsg: '显示 {0} - {1} 条记录，共 {2} 条',
    emptyMsg: '没有记录',
    items: ['-', '每页显示', {
        xtype: 'combobox',
        store: [10, 20, 30, 50],
        editable: false,
        value: pageSize,
        width: 60,
        listeners: {
            select: function (combo) {
                var value = combo.getValue();
                store.pageSize = value;
                store.loadPage(1);
            }
        }
    }, '记录']
});

4. 构建 Grid 表格

在创建完分页工具栏之后，需要创建 Grid 表格，并将其绑定到对应的数据 store 中。具体示例代码如下：

var grid = Ext.create('Ext.grid.Panel', {
    store: store,
    columns: [
        // ...
    ],
    forceFit: true,  // 自适应 Grid 表格的宽度
    dockedItems: [pagingToolbar],  // 将分页工具栏添加为 DockedItems
    renderTo: 'gridDiv'
});

5. 设置 Grid 表格分页参数

在创建了 Grid 表格和分页工具栏之后，需要设置 Grid 表格的分页参数。具体示例代码如下：

store.loadPage(1);

通过调用 store.loadPage 方法，可以设置 Grid 表格当前要显示的页码。此外，还可以使用 store.getTotalCount() 方法获取总记录数，用来动态更新分页工具栏的显示信息。

以上就是针对“EXTJS 学习笔记四 —— 带分页的 Grid”这篇文章的完整攻略，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：extjs 学习笔记四带分页的grid - Python技术站

extjs 学习笔记 四 带分页的grid