Sencha ExtReact：最完整的 React 组件集

ExtReact 是最完整的、经过专业测试和商业支持的 React 组件集，供开发人员用于创建在桌面和移动设备上视觉效果震撼、数据密集型应用程序。它还包括 Webpack 和 Babel 的插件，以优化构建，并提供主题工具，让设计师和开发人员能够完全控制其应用程序的外观和感觉。您可以 免费试用 ExtReact 30 天，并告诉我们您的想法。请继续阅读以了解更多信息。

ExtReact 亮点

• 使用 100 多个 Material Design 风格的组件（包括选项卡、对话框、抽屉、菜单、工具栏和列表）创建美观、动态的应用程序。
• 利用最强大的 Grid 组件驾驭大数据。
• 允许用户使用 Pivot Grid 临时报表生成器组件对数据进行切片和切块。
• 使用响应式布局为所有屏幕和环境进行开发。
• 使用丰富的表单字段集合构建易于使用的数据录入表单。
• 使用 Calendar 组件为您的应用添加交互式调度功能。
• 使用丰富的图表和 D3 可视化组件为您的应用添加令人惊叹的数据可视化功能。
• 通过强大的 ExtReact 主题 API 完全控制应用程序的外观和感觉，或者使用 Sencha Themer 在不编写任何代码的情况下为您的应用程序设置样式。
• 使用提供的 Webpack 和 Babel 插件压缩和优化应用程序构建。
• 多个示例应用程序，包括 ExtReact Conference App、ExtReact Kitchen Sink，具有桌面、平板电脑和智能手机的视图。

为什么选择 ExtReact

React 是一个流行的 JavaScript 框架，它提供了一种基于组件的方法来构建 Web 应用程序。然而，React 不包含任何预构建的组件。许多应用程序需要树形结构、菜单、网格、图表、表单和其他组件来提供用户所需的功能。React 开发人员面临着从头开始构建这些组件或从社区获取它们的困境。

构建健壮、美观且在所有设备和平台上都能良好运行的组件是一项耗时且成本高昂的任务。随着浏览器和语言标准的不断发展，在应用程序生命周期中支持和维护这些组件会增加更多的工作。

幸运的是，React 社区非常庞大，因此有许多预构建的组件可用。然而，使用开源社区的组件会带来一些风险和挑战。发布时间表、维护者承诺和整体质量因项目而异。此外，随着 React 本身的更新，一些库可能会变得不兼容，而另一些则可能需要最新版本的 React。管理 10 到 15 个不同的组件库可能会让人头疼。解决此问题的最佳方法是尽可能从最少的库中获取最多的组件。

ExtReact 在一个商业支持、专业维护的软件包中，为您提供了最完整的 React 应用组件集。让我们来看看它包含哪些内容。

ExtReact Grid

ExtReact Grid 是强大、数据驱动应用程序的核心。它提供了一种强大的方式来显示、排序、分组和编辑数据。所有列都可以重新排列、调整大小、隐藏和排序。用户可以像在 Microsoft Excel 中一样选择行、单元格或列。Grid 允许用户在桌面、平板电脑和智能手机上编辑数据，并能在每种设备上自动选择合适的体验。数据可以导出为 Excel、CSV、TSV 和其他格式。

ExtReact Tree

在桌面、平板电脑和智能手机应用程序中，通常需要 Tree 来显示分层数据。 ExtReact Tree 源自 Grid 组件，并继承了其所有功能，包括列大小调整、排序、过滤、单元格编辑以及拖放功能。

render(){
        return(
            <Tree
                title="Heterogeneous Geographical Tree"
                store={this.store} >
                <TreeColumn 
                    text="Name"
                    dataIndex="name"
                />
            </Tree>
        )
    }

ExtReact Pivot Grid

Microsoft Excel 的数据透视表是汇总、聚合和探索数据的常用机制。 ExtReact Pivot Grid 为 Web 应用程序带来了数据透视功能。Pivot Grid 使您的用户能够探索和聚合多维数据，并提供多种聚合方法，如求和、计数、平均值等。

ExtReact Calendar

您只需一个组件即可为您的应用程序添加完整的日历功能。 ExtReact Calendar 及相关组件可根据时间范围（月、日、周等）消化和可视化事件数据。Calendar 组件支持时区，并具有拖放和大小调整验证功能。

ExtReact Charts

图表是提供出色数据可视化功能的重要组成部分。 ExtReact Charts 包提供了所有常见的 2D 和 3D 图表类型，如饼图、条形图、柱状图、折线图和散点图，以及更复杂的图表，如箱形图、蜡烛图和雷达图。每种图表都与所有主流浏览器兼容。Sparkline 图表也可以嵌入到 Grid 单元格中。

ExtReact D3

D3 是数据可视化领域一个非常受欢迎的选择。 ExtReact D3 组件让将 D3 集成到您的 React 应用程序中变得容易。D3 树形图、旭日图、热力图等都包含在即用型组件中，可随数据变化实时更新。

render() {
        return (
                <D3_Sunburst
                    store={this.store}
                    selection={selection}  
                />
        )
    }

ExtReact Forms

ExtReact Form 组件提供输入掩码、数据验证、键盘导航和焦点管理，帮助您为用户提供无痛的数据录入体验。

ExtReact List

列表是移动优先应用程序中的重要组件。 ExtReact List 组件支持分组、索引、分页等。您还可以使用手风琴或步进器设计配置多个滑动操作，例如删除或回复消息。

render() {
        return (
            <List
                store={this.store}
                plugins={[{
                    type: 'listswiper',
                    // left and right configs
                }]}
            />
        )
    }

ExtReact Tabs

选项卡是让用户快速切换多个视图的好方法。使用 ExtReact Tabs，您可以获得多种位置、标题和图标的配置选项。选项卡也可以是可关闭和禁用的。

ExtReact 功能

灵活的布局

借助 ExtReact Layouts，您可以处理应用程序中每个组件的尺寸和定位，适用于不同的外形尺寸和设备类型。ExtReact 提供了能够根据可用空间自动调整子元素大小的布局。请阅读 ExtReact Layouts Guide 了解更多信息。

响应式 Props

可以使用 `responsiveConfig` 和 `platformConfig` props，为不同的屏幕尺寸和设备平台配置每个组件的不同 prop 值。

<SearchField 
    ui="faded" 
    placeholder="Search..." 
    responsiveConfig={{
        "width <= 600": { 
            flex: 1
        }, 
        "width > 600”: {
            width: 200
        }
    }}
    platformConfig={{
          "phone": {
                ui: 'faded-phone'
  }
    }}        
/>

请阅读 ExtReact 为多种环境和屏幕开发指南 了解更多信息。

数据包

ExtReact 提供了一个数据包，可以轻松高效地扩展远程数据。该数据包允许您的应用程序连接到任何后端数据源，并为网格、树形结构、图表等提供实时更新功能，以及声明式排序、过滤和分组。它具有可扩展的验证系统，包含货币、日期、电子邮件、排除、包含、格式、IP 地址、长度、数字、电话、时间等众多内置验证器。请阅读 ExtReact Data Package guide 了解更多信息。

我们创建了一个应用程序示例，向您展示如何使用 ExtReact 的数据存储和 REST 代理，以及如何使用 node.js 和 SQLLite 实现服务器端排序、过滤和分页。请查看 GitHub 仓库 并按照 README 说明开始。

主题

ExtReact 拥有一个广泛的基于 Sass 的主题 API，让开发人员能够完全控制其应用程序的外观和感觉。ExtReact Premium 包括 Sencha Themer，这是一个允许设计师和开发人员在不编写代码的情况下为 ExtReact 应用创建精美主题的工具。请阅读 ExtReact Theming guide 了解更多信息。

TypeScript 定义

ExtReact 包含 TypeScript 定义，可在包括 Visual Studio Code 在内的多个代码编辑器中实现代码补全。此功能允许您为 ExtReact 组件和 props 接收补全建议。

Sencha Fiddle for ExtReact

Sencha Fiddle 是一个免费工具，允许您在浏览器中尝试 ExtReact 代码，无需下载或安装任何内容。您可以通过保存和共享 fiddle URL 来轻松共享您的 ExtReact 代码。

Accessibility

ExtReact 组件支持基本的辅助功能，如键盘导航和焦点管理。您可以使用键盘在 Grid 单元格之间导航和编辑，切换选项卡，控制列表选择，导航树形结构和菜单，打开和关闭对话框等。

实际示例 - 会议应用程序

作为 ExtReact 发布的一部分，我们在 GitHub 上提供了一个名为 ExtReact Conference App 的示例应用程序。 ExtReact Conference App（也可在我们 Examples 网页上查看）向您展示了如何使用 ExtReact 组件构建响应式 UI，以处理桌面、平板电脑和智能手机。它还展示了如何集成 React 生态系统中两个最受欢迎的库：Redux 和 React Router。

试一试

• 下载 ExtReact 和 Themer 的免费 30 天试用版
• 阅读 入门指南，并使用 ExtReact 组件构建您的第一个 React 应用程序
• 在任何设备上查看 ExtReact Kitchen Sink 示例 和 Conference App