Grid 配置

Ext.grid.Panel 是 ExtJS 的核心组件之一。它是一个功能极其全面的组件，提供了一种显示、排序、分组和编辑数据的简便方法。

基本 Grid Panel

让我们从创建一个基本的 Ext.grid.Panel 开始。以下是启动并运行简单网格所需了解的全部内容

模型和 Store

Ext.grid.Panel 只是一个显示包含在 Ext.data.Store 中的数据的组件。Ext.data.Store 可以被认为是记录或 Ext.data.Model 实例的集合。

这种设置的好处是分离了我们的关注点。Ext.grid.Panel 仅关注数据的显示，而 Ext.data.Store 负责使用 Ext.data.proxy.Proxy 获取和保存数据。

首先，我们需要定义一个 Ext.data.Model。模型只是 字段 的集合，代表一种数据类型。让我们定义一个代表 “User”（用户） 的模型

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: [ 'name', 'email', 'phone' ]
});

接下来，让我们创建一个包含多个 “User”（用户） 实例的 Ext.data.Store。

var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    data: [
        { name: 'Lisa', email: '[email protected]', phone: '555-111-1224' },
        { name: 'Bart', email: '[email protected]', phone: '555-222-1234' },
        { name: 'Homer', email: '[email protected]', phone: '555-222-1244' },
        { name: 'Marge', email: '[email protected]', phone: '555-222-1254' }
    ]
});

为了方便起见，我们将 Ext.data.Store 配置为内联加载其数据。在实际应用程序中，您很可能将 Ext.data.Store 配置为使用 Ext.data.proxy.Proxy 从服务器加载数据。

Grid Panel

现在，我们有了一个模型，它定义了我们的数据结构。我们还将多个模型实例加载到 Ext.data.Store 中。现在我们准备使用 Ext.grid.Panel 显示数据。

在此示例中，我们将 Grid 配置为使用 renderTo 立即将 Grid 渲染到 HTML 文档中。

在许多情况下，网格将是 Ext.container.Viewport 的后代，这意味着渲染已经处理完毕。

Ext.create('Ext.grid.Panel', {
    renderTo: document.body,
    store: userStore,
    width: 400,
    height: 200,
    title: 'Application Users',
    columns: [
        {
            text: 'Name',
            width: 100,
            sortable: false,
            hideable: false,
            dataIndex: 'name'
        },
        {
            text: 'Email Address',
            width: 150,
            dataIndex: 'email',
            hidden: true
        },
        {
            text: 'Phone Number',
            flex: 1,
            dataIndex: 'phone'
        }
    ]
});

这就是全部内容。

我们刚刚创建了一个 Ext.grid.Panel，它将自身渲染到 body 元素。我们还告诉 Grid 面板从我们之前创建的 userStore 获取其数据。

最后，我们定义了 Grid 面板的列，并为它们提供了 dataIndex 属性。此 dataIndex 将模型中的字段与列关联起来。

“Name”（姓名） 列具有固定的 width（宽度）“100px”，并且禁用了 sorting（排序） 和 hiding（隐藏）。“Email Address”（电子邮件地址） 列默认隐藏（可以通过使用任何其他列标题上的菜单再次显示）。最后，“Phone Number”（电话号码） 列 flexes（弹性伸缩） 以适应 Grid 面板总宽度的剩余部分。

有关更大的示例，请参阅 Basic Grid Example（基本网格示例）。

Renderers（渲染器）

您可以使用列配置的 renderer 属性来更改数据的显示方式。renderer 是一个函数，它修改底层值并返回用于显示的新值。Ext.util.Format 中包含了一些最常见的渲染器，但您也可以编写自己的渲染器

columns: [
    {
        text: 'Birth Date',
        dataIndex: 'birthDate',
        // format the date using a named method from the ViewController
        renderer: 'renderDate',
    },
    {
        text: 'Birth Date',
        dataIndex: 'birthDate',
        // format the date using a formatter from the Ext.util.Format class
        formatter: 'date("m/d/Y")',
    },
    {
        text: 'Email Address',
        dataIndex: 'email',
        // format the email address using a custom renderer
        renderer: function(value) {
            return Ext.String.format('<a href="mailto:{0}">{1}</a>', value, value);
        }
    }
]

请参阅 Kitchen Sink 的 Basic Grid（基本网格） 以获取使用自定义渲染器的实时演示。

Navigation（导航）

根据可访问性指南，网格单元格接受焦点，焦点效果可以在主题中指定。

箭头键在两个维度上导航焦点位置。TAB 键将焦点从网格移出到下一个可聚焦元素。

这被称为 Navigable Mode（可导航模式），是网格内处理焦点的默认模式。

如果单元格内有可聚焦的元素（例如 [[Ext.grid.column.Action action columns]] 操作列），则可以使用 ENTER 或 F2 键进入 Actionable Mode（可操作模式）来访问可操作项，其中焦点导航使用 TAB 键在单元格内部进行。

下面讨论的单元格编辑是可操作模式的特例。

ESC 或 F2 退出可操作模式，焦点弹出到最近聚焦的可操作项的封装单元格。

有关详细信息，请参阅 https://www.w3.org/TR/wai-aria-practices/#grid。

Selection Models（选择模型）

Grid 面板可以用于简单地显示数据。但是，通常需要与 Grid 的数据进行交互。所有 Grid 面板都有一个 Ext.selection.Model，它决定了数据的选择方式。最通用的选择模型是 Ext.grid.selection.SpreadsheetModel，它可以配置为选择单元格、行或列，并且在选择行时可以选择性地显示选择复选框。

有关示例，请参阅 Kitchen Sink 的 Spreadsheet Model（电子表格模型）。

其他选择模型包括 Ext.selection.RowModel（选择整个行）和 Ext.selection.CellModel（选择单个单元格）。这些不如 SpreadsheetModel 灵活。

Grid 面板默认使用 Ext.selection.RowModel，但很容易切换到 Ext.grid.selection.SpreadsheetModel

Ext.create('Ext.grid.Panel', {
    selectionModel: 'spreadsheet',
    store: ...
});

Editing（编辑）

Grid 面板具有内置的编辑支持。让我们看一下两种主要的编辑模式 - 行编辑和单元格编辑。

Cell Editing（单元格编辑）

单元格编辑 允许您一次编辑 Grid 面板中的一个单元格中的数据。实现单元格编辑的第一步是为 Grid Panel 中应可编辑的每个 Ext.grid.column.Column 配置编辑器。这是使用 Ext.grid.column.Column#cfg-editor 配置完成的。最简单的方法是仅指定您要用作编辑器的字段的 xtype

Ext.create('Ext.grid.Panel', {
    ...
    columns: [
        {
            text: 'Email Address',
            dataIndex: 'email',
            editor: 'textfield'
       }
    ]
});

如果您需要更多地控制编辑器字段的行为，则 Ext.grid.column.Column#cfg-editor 配置也可以接受 Field 的配置对象。例如，如果我们使用 Ext.form.field.Text 并且我们想要要求一个值

columns: [
    text: 'Name',
    dataIndex: 'name',
    editor: {
        xtype: 'textfield',
        allowBlank: false
    }
[

您可以使用 “Ext.form.field.*” 包中的任何类作为编辑器字段。假设我们要编辑一个包含日期的列。我们可以使用 Ext.form.field.Date 编辑器

columns: [
    {
        text: 'Birth Date',
        dataIndex: 'birthDate',
        editor: 'datefield'
    }
]

在 Ext.grid.Panel 中，任何未配置 ] 的 Ext.grid.column.Column 都将不可编辑。

现在我们已经配置了哪些列要可编辑，为了启用编辑，我们需要使用 Ext.grid.plugin.CellEditing 配置 Ext.grid.Panel

Ext.create('Ext.grid.Panel', {
    ...
    plugins: [{
        ptype: 'cellediting ',
        clicksToEdit: 1
    }]
});

这就是使用单元格编辑创建可编辑 Grid 所需的全部内容。有关工作示例，请参阅 Cell Editing（单元格编辑）。

Row Editing（行编辑）

行编辑使您可以一次编辑整行，而不是逐个单元格编辑。行编辑的工作方式与单元格编辑完全相同 - 我们需要做的就是将插件类型更改为 Ext.grid.plugin.RowEditing。

Ext.create('Ext.grid.Panel', {
    ...
    plugins: [{
        ptype: 'rowediting',
        clicksToEdit: 1
    }]
});

有关工作示例，请参阅 Row Editing（行编辑）。

Grouping（分组）

将行组织成组很容易。首先，我们在 store 上指定 groupField 属性

Ext.create('Ext.data.Store', {
    model: 'Employee',
    data: ...,
    groupField: 'department'
});

接下来，我们配置一个带有 Ext.grid.feature.Grouping 的 Grid，它将处理以组显示行

Ext.create('Ext.grid.Panel', {
    ...
    features: [{ ftype: 'grouping' }]
});

有关实时示例，请参阅 Kitchen Sink 的 Grouping Grid Panel（分组 Grid 面板）。

Paging（分页）

有时您的数据集太大，无法在一个页面上全部显示。Ext.grid.Panel 支持使用 Ext.toolbar.Paging 显示数据集中的单个页面，它使用上一个/下一个按钮加载页面。

Store Setup（Store 设置）

在 Ext.grid.Panel 上设置分页之前，我们必须配置 Ext.data.Store 以支持分页。在下面的示例中，我们向 Ext.data.Store 添加了 Ext.data.Store#cfg-pageSize，并且我们使用 Ext.data.reader.Reader#cfg-totalProperty 配置了 Ext.data.reader.Reader。

Ext.create('Ext.data.Store', {
    model: 'User',
    autoLoad: true,
    pageSize: 100,
    proxy: {
        type: 'ajax',
        url : 'data/users.json',
        reader: {
            type: 'json',
            rootProperty: 'users',
            totalProperty: 'total'
        }
    }
});

Ext.data.reader.Reader#totalProperty 配置告诉 Ext.data.reader.Json 从 JSON 响应中的哪里获取结果总数。此 Ext.data.Store 配置为使用如下所示的 JSON 响应

{
    "success": true,
    "total": 4,
    "users": [
        { "name": "Lisa", "email": "[email protected]", "phone": "555-111-1224" },
        { "name": "Bart", "email": "[email protected]", "phone": "555-222-1234" },
        { "name": "Homer", "email": "[email protected]", "phone": "555-222-1244" },
        { "name": "Marge", "email": "[email protected]", "phone": "555-222-1254" }
    ]
}

分页工具栏

现在我们已经设置了 Ext.data.Store 以支持分页，剩下的就是配置 Ext.toolbar.Paging。您可以将 Ext.toolbar.Paging 放在应用程序布局中的任何位置，但通常它会停靠在 Ext.grid.Panel 上。

Ext.create('Ext.grid.Panel', {
    store: userStore,
    columns: ...,
    dockedItems: [{
        xtype: 'pagingtoolbar',
        store: userStore,   // same store GridPanel is using
        dock: 'bottom',
        displayInfo: true
    }]
});

请参阅 分页表格 (Paging Grid) 以获取工作示例。

缓冲渲染

表格 (Grids) 和树 (Trees) 启用了超大数据集的缓冲渲染，作为使用分页工具栏的替代方案。您的用户可以滚动浏览数千条记录，而不会因一次渲染屏幕上的所有记录而导致性能下降。

仅渲染足够的行以填充表格的可见区域，并在任一侧留有少量的 Ext.grid.Panel#cfg-leadingBufferZone 溢出区，以允许滚动。随着滚动的进行，新行在滚动方向上渲染，而表格后退侧的行将被删除。

默认情况下，表格使用缓冲渲染，因此您不再需要将插件添加到您的表格组件。

请参阅 大数据 (Big Data) 或 过滤树 (Filtered Tree) 以获取工作示例。

嵌入式组件。

自 ExtJS 5.0 以来，开发人员已经能够使用 Widget Column 类在表格单元格中嵌入组件。

在 6.2.0 之前的版本中，以这种方式嵌入的组件无法访问表格的 Ext.app.ViewModel。由列的 dataIndex 引用的字段绑定到组件的 defaultBindProperty。

在 6.2.0 中，嵌入在表格中的组件可以访问 ViewModel 以及其中的所有数据。ViewModel 包含两个特定于行的属性

record
recordIndex

自 ExtJS 6.2.0 以来，开发人员已经能够配置组件以显示在数据行下方（或可配置地，上方）的扩展行中。

嵌入式组件可以访问表格的 ViewModel。

有关更多详细信息，请参阅 在表格中使用组件 (Using Components in Grids) 指南。