ext js怎么获取当前页

使用Ext JS获取当前页的方法：首先，需要理解Ext JS中的分页机制。在Ext JS中，分页通常通过Ext.data.Store和Ext.toolbar.Paging来实现。要获取当前页，可以使用store.currentPage属性，获取分页工具栏上的当前页码、监听分页工具栏的事件、在回调函数中获取当前页。下面将详细介绍其中一种方法，即获取分页工具栏上的当前页码。

获取分页工具栏上的当前页码非常简单。假设您已经有一个分页工具栏和数据存储，您可以直接访问存储的currentPage属性来获取当前页码。下面是一个示例代码：

// 假设您有一个数据存储

var store = Ext.create('Ext.data.Store', {
    // 配置项...
});
// 假设您有一个分页工具栏
var pagingToolbar = Ext.create('Ext.toolbar.Paging', {
    store: store,
    displayInfo: true
});
// 获取当前页码
var currentPage = store.currentPage;
console.log('当前页:', currentPage);

一、EXT JS 分页机制概述

在Ext JS中，分页机制是通过数据存储(Ext.data.Store)和分页工具栏(Ext.toolbar.Paging)来实现的。数据存储负责从服务器加载数据，并根据配置进行分页；分页工具栏则提供了用户界面，用于导航和控制分页。

1、数据存储 (Ext.data.Store)

Ext.data.Store是Ext JS中最常用的数据存储类。它不仅可以用于分页，还可以用于排序、过滤等操作。要实现分页，您需要配置数据存储的pageSize属性，并在服务器端返回分页数据。

var store = Ext.create('Ext.data.Store', {

    pageSize: 20, // 每页记录数
    proxy: {
        type: 'ajax',
        url: 'data.json',
        reader: {
            type: 'json',
            rootProperty: 'items',
            totalProperty: 'total'
        }
    },
    autoLoad: true
});

2、分页工具栏 (Ext.toolbar.Paging)

分页工具栏是一个用于分页导航的用户界面组件。它通常绑定到一个数据存储，并提供分页、跳转、刷新等功能。

var pagingToolbar = Ext.create('Ext.toolbar.Paging', {

    store: store,
    displayInfo: true,
    displayMsg: '显示 {0} - {1} 条，共 {2} 条',
    emptyMsg: '没有数据'
});

二、获取分页工具栏上的当前页码

获取分页工具栏上的当前页码主要通过访问数据存储的currentPage属性来实现。以下是具体步骤：

1、创建数据存储和分页工具栏

首先，您需要创建一个数据存储，并配置分页相关属性。然后，创建一个分页工具栏，并将其绑定到数据存储。

var store = Ext.create('Ext.data.Store', {

    pageSize: 20,
    proxy: {
        type: 'ajax',
        url: 'data.json',
        reader: {
            type: 'json',
            rootProperty: 'items',
            totalProperty: 'total'
        }
    },
    autoLoad: true
});
var pagingToolbar = Ext.create('Ext.toolbar.Paging', {
    store: store,
    displayInfo: true,
    displayMsg: '显示 {0} - {1} 条，共 {2} 条',
    emptyMsg: '没有数据'
});

2、获取当前页码

您可以在任何需要的地方，通过访问数据存储的currentPage属性来获取当前页码。

var currentPage = store.currentPage;

console.log('当前页:', currentPage);

三、监听分页工具栏的事件

除了直接获取当前页码，您还可以监听分页工具栏的事件，在回调函数中获取当前页码。这在需要对分页操作进行额外处理时非常有用。

1、监听change事件

您可以监听分页工具栏的change事件，每当分页工具栏状态改变时，回调函数都会被触发。

pagingToolbar.on('change', function(toolbar, pageData) {

    var currentPage = pageData.currentPage;
    console.log('当前页:', currentPage);
});

2、处理分页操作

在回调函数中，您可以根据当前页码执行相应的操作，例如更新界面、发送统计信息等。

pagingToolbar.on('change', function(toolbar, pageData) {

    var currentPage = pageData.currentPage;
    console.log('当前页:', currentPage);
    // 执行其他操作
    updatePageStatistics(currentPage);
});
function updatePageStatistics(currentPage) {
    // 模拟发送统计信息
    console.log('发送统计信息，当前页:', currentPage);
}

四、实战案例：分页表格

为了更好地理解如何获取当前页码，下面是一个完整的分页表格示例。这个示例展示了如何创建一个分页表格，并在分页操作时获取当前页码。

1、创建数据存储和分页工具栏

var store = Ext.create('Ext.data.Store', {

    pageSize: 20,
    proxy: {
        type: 'ajax',
        url: 'data.json',
        reader: {
            type: 'json',
            rootProperty: 'items',
            totalProperty: 'total'
        }
    },
    autoLoad: true
});
var pagingToolbar = Ext.create('Ext.toolbar.Paging', {
    store: store,
    displayInfo: true,
    displayMsg: '显示 {0} - {1} 条，共 {2} 条',
    emptyMsg: '没有数据'
});

2、创建分页表格

var grid = Ext.create('Ext.grid.Panel', {

    title: '分页表格',
    store: store,
    columns: [
        { text: 'ID', dataIndex: 'id' },
        { text: '姓名', dataIndex: 'name' },
        { text: '年龄', dataIndex: 'age' }
    ],
    bbar: pagingToolbar,
    renderTo: Ext.getBody()
});

3、监听分页工具栏的事件

pagingToolbar.on('change', function(toolbar, pageData) {

    var currentPage = pageData.currentPage;
    console.log('当前页:', currentPage);
    // 执行其他操作
    updatePageStatistics(currentPage);
});
function updatePageStatistics(currentPage) {
    // 模拟发送统计信息
    console.log('发送统计信息，当前页:', currentPage);
}

五、扩展阅读与进阶

为了深入理解Ext JS的分页机制，建议阅读官方文档和示例。此外，可以尝试结合其他高级功能，例如：自定义分页控件、服务端分页处理、结合其他UI组件进行复杂应用开发等。

1、自定义分页控件

您可以根据项目需求，自定义分页控件，以实现更灵活的分页操作。例如，可以添加跳转到指定页码的输入框，或自定义分页按钮样式。

var customPagingToolbar = Ext.create('Ext.toolbar.Paging', {

    store: store,
    displayInfo: true,
    items: [
        '->',
        {
            xtype: 'textfield',
            emptyText: '跳转到页码',
            listeners: {
                specialkey: function(field, e) {
                    if (e.getKey() == e.ENTER) {
                        var page = parseInt(field.getValue(), 10);
                        if (!isNaN(page) && page > 0) {
                            store.loadPage(page);
                        }
                    }
                }
            }
        }
    ]
});

2、服务端分页处理

在实际项目中，分页通常需要在服务端进行处理。服务器需要根据请求参数返回分页数据，包括总记录数和当前页的数据列表。以下是一个服务端分页处理的示例（假设使用的是Node.js和Express）：

const express = require('express');

const app = express();
const port = 3000;
// 模拟数据
const data = Array.from({ length: 100 }, (v, i) => ({
    id: i + 1,
    name: `Name ${i + 1}`,
    age: Math.floor(Math.random() * 100)
}));
app.get('/data.json', (req, res) => {
    const page = parseInt(req.query.page, 10) || 1;
    const limit = parseInt(req.query.limit, 10) || 20;
    const start = (page - 1) * limit;
    const end = page * limit;
    const items = data.slice(start, end);
    const total = data.length;
    res.json({ items, total });
});
app.listen(port, () => {
    console.log(`Server running at http://localhost:${port}/`);
});

3、结合其他UI组件进行复杂应用开发

Ext JS提供了丰富的UI组件，您可以将分页功能与其他组件结合起来，开发复杂的应用。例如，可以在分页表格中添加筛选条件、导出数据功能等。

var grid = Ext.create('Ext.grid.Panel', {

    title: '复杂分页表格',
    store: store,
    columns: [
        { text: 'ID', dataIndex: 'id' },
        { text: '姓名', dataIndex: 'name' },
        { text: '年龄', dataIndex: 'age' }
    ],
    tbar: [
        {
            xtype: 'textfield',
            emptyText: '筛选姓名',
            listeners: {
                change: function(field, newValue) {
                    store.filter('name', newValue);
                }
            }
        },
        {
            text: '导出数据',
            handler: function() {
                // 模拟导出数据
                console.log('导出数据');
            }
        }
    ],
    bbar: pagingToolbar,
    renderTo: Ext.getBody()
});

通过以上内容，相信您已经对Ext JS分页机制和如何获取当前页码有了深入的了解。希望这些知识能帮助您在实际项目中更好地使用Ext JS进行分页处理。如果您在项目管理中需要使用到项目协作软件，可以考虑研发项目管理系统PingCode和通用项目协作软件Worktile，它们能够有效提升团队协作效率，确保项目顺利进行。

相关问答FAQs：

1. 如何在Ext JS中获取当前页的信息？

Ext JS提供了几种方法来获取当前页的信息。您可以使用以下代码来获取当前页的索引和大小：

var grid = Ext.getCmp('yourGridId'); // 获取Grid组件
var store = grid.getStore(); // 获取Grid绑定的数据源
var pageSize = store.getPageSize(); // 获取每页显示的记录数
var currentPage = store.currentPage; // 获取当前页的索引

2. 在Ext JS中如何获取当前页的记录？

如果您想获取当前页的记录，可以使用以下代码：

var grid = Ext.getCmp('yourGridId'); // 获取Grid组件
var store = grid.getStore(); // 获取Grid绑定的数据源
var records = store.getRange(); // 获取当前页的记录数组

您可以通过遍历records数组来访问每条记录的数据。

3. 我如何在Ext JS中获取当前页的数据总数？

要获取当前页的数据总数，您可以使用以下代码：

var grid = Ext.getCmp('yourGridId'); // 获取Grid组件
var store = grid.getStore(); // 获取Grid绑定的数据源
var totalCount = store.getTotalCount(); // 获取数据总数

totalCount变量将包含当前页的数据总数。