使用Sencha ExtReact Grid高效管理和显示React 16应用中的大型数据集，充分利用内置功能（如排序、过滤和编辑），无需大量DOM操作。

关键要点:

• 利用Sencha ExtReact Grid在React 16应用程序中高效管理和显示大型数据集，利用内置功能（如排序、过滤和编辑），无需大量DOM操作。
• 使用ExtReact npm包和ExtReact应用程序生成器快速设置功能齐全的React应用程序，从而简化开发流程。
• 通过将交互式组件（如按钮和火花线图）直接嵌入网格单元格中来增强用户界面，提供动态且响应迅速的用户体验。
• 利用网格导出程序插件，只需少量代码即可启用数据导出功能，允许用户直接从网格导出数据到Excel或CSV格式。
• 使用条件插件和响应式设计功能，优化桌面和移动平台的应用程序，确保无缝的跨平台用户体验。

本文最初发表于Sencha。感谢您支持使SitePoint成为可能的合作伙伴。

React 16是基于React新的核心架构（代号为“Fiber”）构建的第一个React版本。React 16从根本上设计为支持异步渲染，这允许处理大型组件树而不会阻塞主执行线程。它支持许多关键功能，例如使用错误边界捕获异常、从渲染返回多个组件、减小文件大小和支持MIT许可证。

如果您正在使用React 16开发数据驱动的Web应用程序，则您很有可能会在某个时候使用网格或类似电子表格的界面来显示用户的数据。根据具体情况，您的用户可能希望应用程序中的网格能够：

• 带有固定标题的滚动
• 通过单击列标题进行排序
• 显示和隐藏特定列
• 分页、分组和汇总
• 编辑单元格中的数据
• 导出到Excel
• 深入/行扩展

网格可能是React中最棘手和最复杂的UI组件之一，因为许多必要的功能都需要大量的React专业知识，以及深入研究DOM的意愿和能力。幸运的是，ExtReact Grid提供了所有这些功能以及更多功能。

在本文中，我们将使用Sencha ExtReact Grid创建一个示例，该示例显示有关股票和股票公司的信息。如果您想使用HTML表格或其他第三方组件编写网格，您可能需要执行诸如处理单击列标题以进行排序、单击列标题之间的分隔符以调整大小，或者滑动分页器并获取下一页数据之类的操作。使用ExtReact Grid，这些功能是内置的。想自己尝试一下吗？立即开始使用ExtReact的30天免费试用版——在此处注册。

让我们开始使用ExtReact Grid构建应用程序。

使用ExtReact应用程序生成器入门

要开始使用ExtReact组件开发React应用程序，请按照以下步骤操作：

确保您已设置Node环境

首先，确保您的系统上已设置Node 8.11 和NPM 6 。您可以从Node网站下载最新的Node版本。如果您已经安装了Node，则可以使用以下命令轻松检查node和npm版本：

node -v
npm -v

获取ExtReact npm存储库的登录凭据

ExtReact npm包托管在Sencha的私有npm存储库中。您只需登录该存储库一次即可访问所有ExtReact包。要获取登录凭据，请访问ExtReact 30天免费试用页面并填写表格。我们将向您发送一封包含登录详细信息以及一些资源链接（例如文档和示例项目）的电子邮件。

登录ExtReact npm存储库并获取ExtReact应用程序生成器

下一步是登录到Sencha的私有npm存储库，该存储库托管ExtReact包。使用您的npm登录名（在电子邮件中提供）将存储库与@sencha范围关联，并在出现提示时输入凭据：

npm login — registry=http://npm.sencha.com — scope=@sencha

下一步是安装ExtReact生成器包。

npm install -g @sencha/ext-react-gen

创建您的第一个React应用程序

运行Yeoman生成器以创建您的第一个ExtReact应用程序：

ext-react-gen app your-app-name-here -i

生成器将要求您命名您的应用程序、命名npm包并选择主题。默认的Material主题（基于Google的Material设计指南）是一个不错的起始主题。选择“生成一个空应用程序”。生成器还将提示您为项目创建一个新目录。然后，生成器将下载并创建您的示例应用程序，包括相关的依赖项。

运行您的React应用程序

在生成器输出中，您将找到运行应用程序的步骤。这就像更改到您的新应用程序目录并使用以下命令运行应用程序一样简单：

npm start

这将启动应用程序，您的空React应用程序将仅显示应用程序的标题。应用程序中的主组件（例如StocksGrid）在根目录处有一个容器，该容器被标记为全屏，布局设置为fit，这意味着它将拉伸其子元素以填充它。

请参阅GitHub上的此步骤之前的代码。

向应用程序添加网格

添加股票数据

我们将向应用程序添加一个示例数据集，称为stocks.json。这是一个相当大的数据集，大约有10,000行json数据，每一行代表一家公司或股票代码——因此我们有公司名称、股票代码、行业、他们所在的行业，以及一个包含该股票最后5次销售的滴答数组。这是我们将在网格中显示的数据。在实际应用程序中，所有这些数据都将在后端返回。我们将为此示例应用程序静态加载它，而不是遍历如何构建后端rest API的所有机制。但是它将以与您从实际后端获取数据完全相同的方式加载。

创建基本网格

在StockGrid组件render方法中，我们将返回一个带有列的网格。

要在网格中放置列，我们使用column组件，它采用与stocks数据名称字段相同的dataIndex。它采用作为列标题文本的text prop，然后我们还可以为列指定宽度，例如固定宽度或flex，或者flex和最小值或最大值的组合。我们将为公司名称、代码、滴答、行业和行业添加column组件。创建如下所示的新StocksGrid类：

 >
       dataIndex="name" text="Name" width={300} />
       dataIndex="symbol" text="Symbol" />
       dataIndex="ticks" text="Trend" />
       dataIndex="sector" text="Sector" width={200} />
       dataIndex="industry" text="Industry" width={350} />
>

现在，将StockGrid添加到Class App中，如下所示：

export default class App extends Component {
  render() {
       return (
                                        
       )
   }
}

请参阅GitHub上的此步骤之前的代码。您将能够在npm start上看到带有空网格的Web应用程序。

使用网格绑定股票数据

ExtReact中的网格是从Ext Data Store中提取并呈现数据的表。在ExtReact中，我们的存储实现是一个数据结构，允许您为网格或组件（如列表或图表）排序和过滤数据。

我们现在可以开始加载股票数据并创建存储。同样，网格始终从存储中获取其数据，并且与网格的一些交互将触发存储上的事件，例如重新加载、排序或分页。为此，我们将在此处创建我们的存储。

Ext数据存储与flux存储不同。使网格和存储与标准React方法略有不同的是，两者紧密集成。通常，您可以将数据直接传递到存储，或者存储可以使用代理自行从后端提取数据。使用ExtReact Grid，您可以获得交互式功能，例如过滤、排序、分页、分组和汇总，而无需实际编写代码。

在此示例中，我们直接从Stocks数据文件将数据传递到存储。您还可以使用代理配置创建存储——拥有代理允许我们执行各种很棒的操作，例如远程分页、过滤和排序。我们将autoload设置为true，因此它会自动加载网格。数据并非按任何标准特别排序，因此我们将通过指定name属性在客户端对其进行排序。

     this.store = new Ext.data.Store({
           data: stocks,
           autoLoad: true,
           sorters: [{
               property: 'name'
           }],
           listeners: {
               update: this.onRecordUpdated
           }
       })

在Grid中，将store配置分配给创建的store。

 store={this.store}>
      ...
>

现在，我们有一个包含所有数据的网格，如下所示：

使用这段简单的代码，您可以免费获得许多功能——例如排序——这允许您单击任何列标题，它会自动排序（请参阅下面的符号列）。

在这种情况下，排序是在客户端完成的。但是，如果我们实现了真实的后台API，我们可以配置代理在后台进行远程排序，并在数据库中使用“order by子句”进行排序。

您还可以免费获得可调整大小的列。因此，即使我们在这些列上设置了宽度，如果用户想查看或关闭某些内容，他也可以通过左右拖动列来实现。

您还可以获得一个不错的分组功能。因此，如果我们想按行业分组，我们可以说按此字段分组，它将按行业的值对所有数据进行分组，并且在您向下滚动每个分组时，它将为您提供一个固定的标题。

您会注意到，对于10,000条记录，此数据渲染速度非常快。它渲染速度如此之快的原因是它使用了我们所说的缓冲渲染。因此，尽管此表看起来已满，并且您可以向下滚动，并且它会不断地继续下去，但在初始加载时，它只渲染比您实际看到的“视口高度”多一点的内容。

当您向下滚动时，它实际上会用较新的记录替换单元格的内容，就像您在存储中向下分页一样。因此，它实际上尽可能地保留了DOM元素，并保持DOM较小，从而使内存消耗较小并确保高性能。

请参阅GitHub上的此步骤之前的代码。

设置网格样式

有多种方法可以设置网格样式，以便更容易分析数据。

使用Cell prop

让我们来看看控制单元格样式的方法。我们可以使名称加粗——最好的方法是使用cell prop。cell采用许多配置，这些配置控制单元格的外观。我们将在此处添加一个style配置，然后我们将说fontWeight等于粗体。

cell={ { style: {fontWeight:'bold'}}}

在行中添加按钮

现在，我们将做一些更适用于现实世界的事情。假设我们想要一个按钮，我们可以单击该按钮来购买左侧列中的其中一只股票。为此，我们可以添加一列，这次我们不会添加dataIndex，因为它不对应于字段中的任何特定项目或存储中的任何字段。我们将添加一个带有Button的WidgetCell。我们将进行一些样式设置——我们将为其添加一个圆形操作UI，因此按钮将具有圆形操作外观：

 >
   >
        ui ="round action"
               handler = {this.buyHandler} 
               text = "Buy"/>
   >
>

我们将使用的buy handler非常简单。当您单击购买按钮时，我们将只使用名为ext.toast的假设，它将在顶部显示一条小提示消息，显示您要购买的股票的代码。同样，我们将渲染每一行将要渲染的列。我们将渲染此按钮，然后当您单击它时，它将调用此函数：

buyHandler = (button) => {
     let gridrow = button.up('gridrow'),
     record = gridrow.getRecord();
     Ext.toast(`Buy ${record.get('name')}`)
}

您可以从此示例中看到，您基本上可以在网格单元格内嵌入任何ExtReact组件，并且它是完全交互式的。它充当完整的React组件。

请参阅GitHub上的此步骤之前的代码。

添加趋势火花线图

在Stock Data中，我们有最后五次股票销售的滴答数组。让我们将其作为火花线图嵌入网格中。我们将使用widgetcell在网格单元格内渲染ExtReact组件。

 dataIndex="ticks"
                   text="Trend"
                   sortable={false}
                   cell = { {
                           xtype: 'widgetcell',
                           forceWidth: true,
                           widget: {
                                   xtype: 'sparklineline',
                                   tipTpl:
                                   'Price: {y:number("0.00")}'
                             }
                   } }
               />

当您使用鼠标悬停在线图中的不同点上时，它将显示格式化为两位小数的Y值。

请参阅GitHub上的此步骤之前的代码。

将数据导出到Excel

数据密集型应用程序中的常见要求之一是将数据导出到Excel。ExtReact通过使用网格的plugins prop可以轻松实现此目的。

               ..
               plugins={{
                   gridexporter: true,
                 }}

           >

为了方便调用导出功能，我们将添加更多组件。我们将添加titlebar并将titlebar停靠在网格顶部并在其中放置一个菜单。当您单击“导出”按钮时，您将可以选择导出到Excel或CSV。

 docked="top" title="Stocks">
           align="right" text="Export">
                    indented={false}>
                           text="Excel"
                               handler=
                              {this.export.bind(this, 'excel07')}/>
                            text="CSV"
                                handler=
                                 {this.export.bind(this, 'csv')}/>
                    >
           >
>

导出处理程序将传递导出类型和文件名扩展名：

export = (type) => { this.grid.cmp.saveDocumentAs(
                             { type, title: 'Stocks' });
}

确保在package.json依赖项中包含导出程序。例如：

"@sencha/ext-exporter": "~6.6.0"

安装依赖项。

npm install
npm start

Exporter插件支持将数据导出到各种文件格式。它支持原生XSLX、Excel XML以及HTML和CSV/TSV（逗号/制表符分隔值）格式。

请参阅GitHub上的此步骤之前的代码。

向网格添加编辑功能

我们可以通过添加编辑数据的功能，使网格更像电子表格。要添加此功能，我们需要添加另一个名为gridcellediting的插件。通过添加此插件并将可编辑的列标记为可编辑，您现在拥有可以通过双击任何网格单元格来编辑的网格数据。您可以通过在网格单元格中按Tab键来继续编辑网格。

添加网格单元格编辑插件：

gridcellediting: true

使“名称”可编辑：

 dataIndex="name" text="Name" width={300} cell={ { style: {fontWeight:'bold'}}} editable/>

处理编辑事件

如果您想在编辑网格单元格后执行一些特殊操作，则可以侦听存储中的数据更改事件。您可以通过添加侦听器配置和“更新事件”的侦听器来实现。

“更新事件”将传递许多参数，包括存储、更新的记录、描述发生的事件的对象，然后传递已更改字段名称的数组。您将在处理程序中添加它。在这种情况下，我们只是显示一条提示消息。在实际应用程序中，您实际上会应用业务逻辑，例如将更改持久保存到数据库中。

...
listeners: {
           update: this.onRecordUpdated
}
...
onRecordUpdated = (store, record, operation, modifiedFieldNames) => {
     const field = modifiedFieldNames[0];
     Ext.toast(`${record.get('name')}
                ${field} updated to  ${record.get(field)}`)
}

向网格单元格添加选择选项

如果您想向网格单元格添加“选择”选项，则可以使用另一个名为SelectField的ExtReact组件来实现。您只需在所需的列中添加SelectField ExtReact组件即可。

 dataIndex="sector" text="Sector" width={200} editable>
         options={sectors}/>
>

请参阅GitHub上的此步骤之前的代码。

优化跨平台体验

这对于桌面体验效果很好，但是当您最小化移动电话体验的屏幕大小时，单元格编辑可能不是最佳的编辑体验。对于小型屏幕设备，您可能需要选择不同的编辑样式。

platformconfig选项允许您为桌面或移动设备指定行为。您可以根据PlatformConfig将任何prop设置为不同的值，在这里，我们将根据平台设置插件。在此示例中，当应用程序在桌面上时，我们将使用gridcellediting。当应用程序在移动设备上时，我们将使用grideditable，它提供了一种在移动设备上编辑数据的更好方法。

platformConfig={{
                   desktop: {
                       plugins: {
                           gridexporter: true,
                           gridcellediting: true
                       }
                   },
                   '!desktop': {
                       plugins: {
                           gridexporter: true,
                           grideditable: true
                       }
                   }
               }}

请参阅GitHub上的此步骤之前的代码。

您可以使用ExtReact 6.6网格，并使用React 16轻松地向数据驱动的Web应用程序中添加类似电子表格的界面。使用ExtReact，您可以使用任何Ext JS现代组件，包括网格、树状网格、透视网格、图表、D3可视化等等——无需自定义。您可以构建一个优化的最小化包，其中仅包含您在应用程序中使用的组件。您可以通过使用在桌面和移动设备上看起来都很棒的布局和自适应设计功能来构建沉浸式用户参与。提醒您，您可以立即开始免费试用ExtReact的30天试用版——在此处注册。

有关使用Sencha Grid构建React 16 Web应用程序的常见问题

什么是Sencha Grid，它如何与React 16集成？

Sencha Grid是一个高性能的网格组件，旨在处理大量数据。它与React 16（一个流行的用于构建用户界面的JavaScript库）无缝集成。这种集成允许开发人员利用React的基于组件的架构的强大功能以及Sencha Grid的强大功能，例如数据排序、过滤、分组和编辑。这种组合为构建复杂的Web应用程序提供了强大的工具。

如何在我的React 16应用程序中开始使用Sencha Grid？

首先，您需要使用npm（Node.js的包管理器）安装Sencha Grid包。安装后，您可以将Sencha Grid组件导入到您的React应用程序中，并像使用任何其他React组件一样使用它。Sencha Grid组件提供了各种prop，您可以使用这些prop来自定义其行为和外观。

我可以将Sencha Grid与其他JavaScript框架或库一起使用吗？

是的，Sencha Grid的设计是与框架无关的，这意味着它可以与任何JavaScript框架或库一起使用。但是，由于React和Sencha Grid都具有基于组件的特性，因此与React 16的集成特别无缝。

Sencha Grid的一些关键功能是什么？

Sencha Grid提供了广泛的功能，使其成为显示和操作大量数据的强大工具。这些功能包括数据的排序、过滤、分组和编辑，以及高级功能，如无限滚动、行扩展器和列锁定。网格还支持各种数据类型和格式，并且可以轻松自定义以满足您的应用程序的需求。

Sencha Grid如何处理大量数据？

Sencha Grid旨在高效地处理大量数据。它使用虚拟滚动机制，该机制仅渲染当前在视口中可见的行。这意味着即使您的网格有数千甚至数百万行，性能仍然很高，用户体验也很流畅。

我可以自定义Sencha Grid的外观吗？

是的，Sencha Grid提供了各种自定义其外观的选项。您可以使用CSS更改颜色、字体和其他样式，还可以使用其广泛的API自定义网格的布局和行为。

如何处理用户与Sencha Grid的交互？

Sencha Grid提供了各种事件，您可以侦听这些事件以处理用户交互。这些事件包括单击事件、选择事件、编辑事件等等。通过侦听这些事件，您可以在应用程序中实现复杂的行为和交互。

我可以在商业应用程序中使用Sencha Grid吗？

是的，Sencha Grid可用于商业和非商业应用程序。但是，对于商业用途，您需要从Sencha购买许可证。

如何更新Sencha Grid中的数据？

Sencha Grid提供了多种更新数据的方法。您可以更新整个数据集，也可以更新单个行或单元格。当数据更新时，网格会自动重新渲染受影响的行或单元格。

Sencha Grid提供了哪些类型的支持？

Sencha为Sencha Grid提供了全面的文档和教程，以及一个社区论坛，您可以在其中提问并与其他开发人员分享知识。此外，Sencha还为需要额外帮助或指导的客户提供专业的支持和咨询服务。