extjs 学习笔记 四 带分页的grid

yizhihongxing

下面是针对“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技术站

(0)
上一篇 2023年6月16日
下一篇 2023年6月16日

相关文章

  • Layer弹出层动态获取数据的方法

    Layer弹出层是一款基于jQuery的Web弹出组件,它具有美观、易用、功能强大的特点。在开发时,可能需要在弹出层中展示动态获取的数据。本攻略将详细说明“Layer弹出层动态获取数据的方法”。 步骤1:引入jQuery库和layer.js文件 Layer弹出层组件基于jQuery,使用前需要先确认页面中已经引入了jQuery库,以便后续使用。 <!-…

    Java 2023年6月16日
    00
  • 浅谈Spring学习之request,session与globalSession作用域

    浅谈Spring学习之request,session与globalSession作用域 1. 介绍 在 Spring 中,我们可以通过 request、session 和 globalSession 三种作用域来存储数据。这些作用域的范围从小到大逐级升高,对应的生命周期也逐级递增,具体的介绍如下: request:处理一次请求的过程中有效,即发送一次请求到服…

    Java 2023年6月15日
    00
  • Java遍历Map对象的四种方式

    下面我将为你详细讲解Java遍历Map对象的四种方式。 1. 使用Iterator遍历Map 使用Iterator遍历Map需要先通过Map的entrySet()方法获取entrySet,然后获取iterator进行遍历。示例代码如下: Map<String, Object> map = new HashMap<>(); map.pu…

    Java 2023年5月26日
    00
  • JVM之内存分配和回收机制

    下面是“JVM之内存分配和回收机制”的详细攻略。 什么是JVM Java虚拟机(Java Virtual Machine,简称JVM)是Java程序的运行环境,它可以在不同的操作系统中运行Java程序。JVM是Java的核心,它负责将Java字节码(bytecode)解释执行成机器码。并且,JVM还具有垃圾回收、内存分配等功能,这也是Java程序员生产力高的…

    Java 2023年5月20日
    00
  • 值得收藏的SpringBoot 实用的小技巧

    值得收藏的SpringBoot实用的小技巧 在SpringBoot的开发过程中,有一些实用的小技巧可以提高开发效率,降低代码量和阅读难度。下面列举了一些值得收藏的小技巧。 1. 使用lombok简化实体类的编写 在实体类中,我们通常需要定义常量、属性、getter/setter、toString等方法,这些方法都是重复的代码,使用lombok可以自动生成这些…

    Java 2023年5月15日
    00
  • Java利用LocalDate类实现日历设计

    Java利用LocalDate类实现日历设计 简介 Java 8引入了一个新的API——java.time包,其中包含LocalDate类。LocalDate类提供了一些强大的工具用于日历的处理和操作。在本篇文章中,我们将详细讲解如何使用LocalDate类实现日历设计。 步骤 创建LocalDate对象 在Java中,我们可以使用LocalDate类创建一…

    Java 2023年5月20日
    00
  • Java之Arrays的各种功能和用法总结

    Java之Arrays的各种功能和用法总结 简介 Java中的Arrays类提供了一组用于操作数组的静态方法。Arrays类中的方法支持对数组的排序、搜索、比较、填充和转换等操作,该类还提供了一个asList()方法来创建一个ArrayList. 方法列表 下面是Arrays类中一些常用方法的列表: 方法 描述 sort() 对数组进行排序。 binaryS…

    Java 2023年5月26日
    00
  • Java仿Windows记事本源代码分享

    当我们想要学习一个新的知识点或技能时,最好的方法就是阅读和理解已经存在的代码,在此基础上进行修改和调试。 本篇攻略将带领大家深入了解Java仿Windows记事本的源代码,为大家提供具体的实例说明,帮助大家更好地理解和使用该代码。 1.前置环境要求 要打开并使用这个记事本仿真代码,你需要在你的计算机上预先安装Java环境。你可以从Java官网上下载合适的Ja…

    Java 2023年5月23日
    00
合作推广
合作推广
分享本页
返回顶部