ExtReact 产品的文档在某种程度上与其他 Sencha 产品的文档有所不同。以下章节描述了除另有说明为 ExtReact
独有的所有产品的文档。
许多类都有快捷名称,用于在使用配置对象创建(实例化)类时使用。快捷名称被称为 别名
(如果类扩展了 Ext.Component,则为 xtype
)。别名/xtype 列在适用类的类名旁边,以供快速参考。
ExtReact 组件类在 API 类文档的顶部突出显示可配置名称,后跟完全限定的类名。
框架类或其成员可以指定为 private
或 protected
。否则,类/成员为 public
。Public
、protected
和 private
是用于传达类或类成员应如何以及何时使用的访问描述符。
Public 类和类成员可供任何其他类或应用程序代码使用,并且在主要产品版本中可以作为稳定和持久的内容依赖。公共类和成员可以通过子类安全地扩展。
Protected 类成员是稳定的 public
成员,旨在由拥有类或其子类使用。受保护的成员可以通过子类安全地扩展。
Private 类和类成员在框架内部使用,不供应用程序开发人员使用。私有类和成员可能会随时更改或从框架中省略,恕不另行通知,不应在应用程序逻辑中依赖。
ExtReact 组件类将配置选项显示为 props
ExtReact 组件类不将属性列为专用成员类型,而是列为 read only
props
static
标签。*请参阅下面的静态。下面是一个示例类成员,我们可以对其进行剖析,以显示类成员的语法(在本例中是从 Ext.button.Button 类查看的 lookupComponent 方法)。
让我们看看成员行的每个部分
lookupComponent
)( item )
)Ext.Component
)。对于除了 undefined
以外不返回任何内容的方法,可以省略此项,或者可以显示为以斜杠 /
分隔的多个可能值,表示返回的内容可能取决于方法调用的结果(即,如果 get 方法调用成功,则方法可能返回 Component,如果失败,则返回 false
,这将显示为 Ext.Component/Boolean
)。PROTECTED
- 请参阅下面的标志部分)Ext.container.Container
)。如果成员源自当前类,则源类将显示为蓝色链接,如果它从祖先或混合类继承,则显示为灰色。view source
)item : Object
)。undefined
以外的值,则“返回值”部分将注明返回的类或对象类型和描述(示例中的 Ext.Component
)Available since 3.4.0
- 示例中未显示),紧接在成员描述之后Defaults to: false
)API 文档使用许多标志来进一步传达类成员的功能和意图。标签可以用文本标签、缩写或图标表示。
除非装饰为 immutable
,否则所有 ExtReact props 都是 bindable
不可变的 ExtReact props 在实例化组件时可能不作为可配置的 prop 使用
classInstance.method1().method2().etc();
false
,则标记为可阻止的事件将不会触发- 表示框架类
- Singleton 框架类。*有关更多信息,请参阅 singleton 标志
- 组件类型框架类(Ext JS 框架中扩展 Ext.Component 的任何类)
- 表示类、成员或指南在当前查看的版本中是新的
- 表示类型为 config
的类成员
或者在 ExtReact 组件类的情况下,这表示类型为 prop
的成员
- 表示类型为 property
的类成员
- 表示类型为 method
的类成员
- 表示类型为 event
的类成员
- 表示类型为 theme variable
的类成员
- 表示类型为 theme mixin
的类成员
- 表示类、成员或指南在当前查看的版本中是新的
在 API 文档页面上的类名称正下方是一行按钮,对应于当前类拥有的成员类型。每个按钮显示按类型划分的成员计数(此计数在应用过滤器时更新)。单击按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示该类型的所有成员的弹出菜单,以进行快速导航。
与类配置选项相关的 Getter 和 Setter 方法将显示在方法部分以及 API 文档和成员类型菜单的 configs 部分中,紧挨着它们所作用的配置下方。Getter 和 Setter 方法文档将在 config 行中找到,以便于参考。
ExtReact 组件类不会将 Getter/Setter 方法提升到 prop 中。所有方法都将在 Methods
部分中描述
您的页面历史记录保存在本地存储中,并显示在顶部标题栏的正下方(使用可用的实际空间)。默认情况下,显示的唯一搜索结果是与您当前查看的产品/版本匹配的页面。您可以通过单击历史记录栏右侧的 按钮并选择“全部”单选选项来展开显示的内容。这将显示所有产品/版本的所有最近页面历史记录栏中。
在历史记录配置菜单中,您还将看到最近访问页面的列表。结果按“当前产品/版本”和“全部”单选选项过滤。单击 按钮将清除历史记录栏以及本地存储中保存的历史记录。
如果在历史记录配置菜单中选择了“全部”,则将启用“在历史记录栏中显示产品详细信息”复选框选项。选中后,每个历史页面的产品/版本将与历史记录栏中的页面名称一起显示。将光标悬停在历史记录栏中的页面名称上也会显示产品/版本作为工具提示。
可以使用页面顶部的搜索字段搜索 API 文档和指南。
在 API 文档页面上,还有一个过滤器输入字段,该字段使用过滤器字符串过滤成员行。除了按字符串过滤外,您还可以按访问级别、继承和只读过滤类成员。这是通过使用页面顶部的复选框完成的。
API 类导航树底部的复选框过滤类列表以包含或排除私有类。
单击空的搜索字段将显示您最近 10 次的搜索,以便快速导航。
每个 API 文档页面(JavaScript 原始类型页面除外)都有一个与该类相关的元数据菜单视图。此元数据视图将具有以下一项或多项
Ext.button.Button
类具有 Ext.Button
的备用类名称)。备用类名称通常为了向后兼容性而维护。可运行的示例 (Fiddles) 默认在页面上展开。您可以使用代码块左上角的箭头单独折叠和展开示例代码块。您还可以使用页面右上角的切换按钮切换所有示例的折叠状态。切换所有状态将在页面加载之间记住。
类成员默认在页面上折叠。您可以使用成员行左侧的箭头图标或全局使用右上角的展开/折叠所有切换按钮来展开和折叠成员。
在较窄的屏幕或浏览器上查看文档将导致针对较小外形尺寸优化的视图。桌面和“移动”视图之间的主要区别在于
可以通过单击 API 文档页面顶部的类名称来查看类源代码。可以通过单击成员行右侧的“查看源代码”链接来查看类成员的源代码。
ExtReact 中许多处理大量数据的组件(例如网格和图表)使用来自 ExtReact 数据包的类来加载、排序、过滤和准备用于显示的数据。本指南介绍了使用 ExtReact 数据包的基础知识。
Ext.data.Store
Ext.data.Store
类用于将数据加载到网格、树、列表、图表、D3 可视化等中。此示例显示了 Ext.data.Store
与 Grid
的典型用法
import React, { Component } from 'react';
import { ExtReact } from '@sencha/ext-react';
import { Grid, Column } from '@sencha/ext-modern';
export default class UsersGrid extends Component {
store = Ext.create('Ext.data.Store', {
fields: ['name', 'email'],
data: [
{ name: 'Tim Smith', email: '[email protected]' },
{ name: 'Jill Lindsey', email: '[email protected]' }
]
})
render() {
return (
<ExtReact>
<Grid title="Users" store={this.store}>
<Column text="Name" dataIndex="name"/>
<Column text="Email" dataIndex="email"/>
</Grid>
</ExtReact>
)
}
}
Store 可以配置 fields
数组或 model
。上面的示例通过 data
配置使用内联数据。在大多数实际应用中,您将使用 proxy
配置您的 store 以从服务器获取数据。
Ext.data.Proxy
Store 可以通过设置 proxy
配置从服务器获取数据,该配置接受 Ext.data.proxy.Proxy
子类的配置选项。我们可以修改前面的示例中的 store,以使用 Ext.data.proxy.Ajax
从 users.json
获取数据
store = Ext.create('Ext.data.Store', {
fields: ['name', 'email'],
autoLoad: true,
proxy: {
type: 'ajax', // refers to the alias "proxy.ajax" on Ext.data.proxy.Ajax
url: 'users.json'
}
})
在这里,我们将 autoLoad
配置设置为 true,以便在创建 store 后立即获取数据。我们也可以设置 autoLoad: false
,然后在稍后通过调用来获取数据
this.store.load();
您可以通过指定 sorters
配置对 store 中的数据进行排序
store = Ext.create('Ext.data.Store', {
fields: ['name', 'email'],
autoLoad: true,
proxy: {
type: 'ajax', // refers to the alias "proxy.ajax" on Ext.data.proxy.Ajax
url: 'users.json'
},
sorters: [{
property: 'email',
direction: 'ASC'
}]
})
或通过调用 sort 方法
this.store.sort([{
property: 'email',
direction: 'ASC'
}])
默认情况下,排序在客户端完成。您可以通过在 store 上设置 remoteSort: true
来配置服务器端排序。当 remoteSort
设置为 true
时,proxy 将在每个请求中将 sorters 配置作为参数发送。例如
users.json?sort=[{"property":"email","direction":"ASC"}]
您可以通过指定 filters
配置来过滤 store 中的数据
store = Ext.create('Ext.data.Store', {
fields: ['name', 'email'],
autoLoad: true,
proxy: {
type: 'ajax', // refers to the alias "proxy.ajax" on Ext.data.proxy.Ajax
url: 'users.json'
},
filters: [{
property: 'email',
value: /@sencha.com$/
}]
})
或使用自定义过滤器函数
filters: [{
filterFn: record => record.get('email').match(/@sencha.com$/i)
}]
我们还可以通过调用 filterBy
方法来过滤 store 中的数据
this.store.filterBy(record => record.get('email').match(/@sencha.com$/i));
我们可以通过调用来删除任何现有过滤器
this.store.clearFilters();
与排序一样,默认情况下,过滤在客户端完成。我们可以设置 remoteFilter: true
以在服务器上过滤。当 remoteFilter
设置为 true
时,filters
配置将作为参数随每个请求一起发送。例如
users.json?filter=[{"property":"email","value":"@sencha.com"}]
当 store 被过滤或排序时,所有使用它的组件都会自动刷新。有时我们希望在一个组件中显示所有数据,而在另一个组件中显示数据子集。我们可以通过使用 Ext.data.ChainedStore
来做到这一点。
例如,我们可以在一个网格中显示所有用户,而在另一个网格中仅显示特定域中的用户
const allUsers = Ext.create('Ext.data.Store', {
autoLoad: true,
proxy: {
type: 'ajax',
url: 'users.json'
}
});
const senchaUsers = Ext.create('Ext.data.ChainedStore', {
source: allUsers,
filters: [{
property: 'email',
value: '@sencha.com'
}]
});
function MyView() {
return (
<Container layout="vbox">
<Grid title="All Users" store={allUsers}>
...
</Grid>
<Grid title="Sencha Users" store={senchaUsers}>
...
</Grid>
</Container>
)
}
Ext.data.Model
Store 可以配置 fields
数组或 model
。事实上,指定 fields
数组会创建一个隐式模型。模型允许您在多个 store 中重用一组字段。模型还为我们提供了一种定义用于解释数据的可重用逻辑的方法。这是一个定义模型的示例
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
fields: [
{ name: 'name', type: 'string' },
{ name: 'email', type: 'string' },
{ name: 'age', type: 'integer' },
{ name: 'active', type: 'boolean', defaultValue: true, convert: value => value == 'Yes' }
]
});
在上面的示例中,我们使用 convert
配置来处理自定义数据格式,在本例中是将“Yes”转换为 true
,并将所有其他值转换为 false
。
请注意,Ext.define
的第一个参数(在本例中为“MyApp.model.User”)是我们想要创建的类的名称。它将作为全局变量导出。如果我们不想导出全局变量,我们可以简单地指定 null
作为第一个参数。例如
export default Ext.define(null, {
extend: 'Ext.data.Model',
...
})
模型可以定义其值从其他字段计算得出的字段。例如
Ext.define('MyApp.model.Substance', {
fields: [{
name: 'volume',
type: 'float'
}, {
name: 'mass',
type: 'float'
}, {
name: 'density',
calculate: ({ volume, mass }) => volume / mass
}]
})
我们可以使用 get 方法访问模型字段的值
record.get('email');
所有具体的(非计算的)字段都通过 data
属性可用
const { name, email } = record.data;