文档帮助

术语、图标和标签

许多类在使用配置对象创建(实例化)类时使用快捷名称。快捷名称被称为别名(如果类扩展了 Ext.Component,则为xtype)。别名/xtype 列在适用类的类名旁边,以便快速参考。

访问级别

框架类或其成员可以指定为privateprotected。否则,类/成员为publicPublicprotectedprivate是访问描述符,用于传达类或类成员的使用方式和时间。

成员类型

成员语法

以下是一个示例类成员,我们可以对其进行分析以显示类成员的语法(在本例中,从 Ext.button.Button 类中看到的 lookupComponent 方法)。

lookupComponent ( item ) : Ext.Component
protected

在初始化items配置期间,或添加新项目时,或{@link #insert 插入}时,将原始配置对象添加到此容器时调用。

此方法将传递的对象转换为实例化的子组件。

当需要对子级创建应用特殊处理时,可以在子类中覆盖此方法。

参数

item :  Object

要添加的配置对象。

返回值
Ext.Component

要添加的组件。

让我们看看成员行中的每个部分

成员标志

API 文档使用许多标志来进一步传达类成员的功能和意图。标签可以用文本标签、缩写或图标表示。

类图标

- 表示框架类

- 单例框架类。*有关更多信息,请参阅单例标志

- 组件类型框架类(Ext JS 框架中扩展 Ext.Component 的任何类)

- 表示该类、成员或指南在当前查看的版本中是新的

成员图标

- 表示类型为config的类成员

- 表示类型为property的类成员

- 表示类型为method的类成员

- 表示类型为event的类成员

- 表示类型为theme variable的类成员

- 表示类型为theme mixin的类成员

- 表示该类、成员或指南在当前查看的版本中是新的

类成员快速导航菜单

在 API 文档页面上的类名下方,有一排按钮,对应于当前类拥有的成员类型。每个按钮都显示了按类型划分的成员数量(此数量会随着过滤器的应用而更新)。单击按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示一个弹出菜单,其中包含该类型的所有成员,以便快速导航。

Getter 和 Setter 方法

与类配置选项相关的 Getter 和 Setter 方法将显示在方法部分以及 API 文档和成员类型菜单的配置部分中,紧挨着它们所使用的配置。Getter 和 Setter 方法文档将在配置行中找到,以便于参考。

历史记录栏

您的页面历史记录保存在本地存储中,并在顶部标题栏下方显示(使用可用的空间)。默认情况下,仅显示与您当前查看的产品/版本匹配的页面搜索结果。您可以通过单击历史记录栏右侧的按钮并选择“全部”单选按钮来扩展显示的内容。这将显示所有产品/版本的历史记录栏中的所有最近页面。

在历史记录配置菜单中,您还会看到最近页面访问的列表。结果按“当前产品/版本”和“全部”单选按钮进行过滤。单击按钮将清除历史记录栏以及本地存储中的历史记录。

如果在历史记录配置菜单中选择了“全部”,则“在历史记录栏中显示产品详细信息”的复选框选项将被启用。选中后,每个历史页面的产品/版本将与历史记录栏中的页面名称一起显示。将光标悬停在历史记录栏中的页面名称上也会显示产品/版本作为工具提示。

搜索和过滤器

可以使用页面顶部的搜索字段搜索 API 文档和指南。

在 API 文档页面上,还有一个过滤器输入字段,使用过滤器字符串过滤成员行。除了按字符串过滤外,还可以按访问级别、继承和只读过滤类成员。这是使用页面顶部的复选框完成的。

API 类导航树底部的复选框过滤类列表,以包含或排除私有类。

单击空搜索字段将显示您最近的 10 次搜索,以便快速导航。

API 文档类元数据

每个 API 文档页面(除了 Javascript 原语页面)都有一个与该类相关的元数据的菜单视图。此元数据视图将包含以下一项或多项

展开和折叠示例和类成员

默认情况下,可运行示例(Fiddle)在页面上展开。您可以使用代码块左上角的箭头,单独折叠和展开示例代码块。您也可以使用页面右上角的切换按钮,切换所有示例的折叠状态。切换所有状态将在页面加载之间保存。

默认情况下,类成员在页面上折叠。您可以使用成员行左侧的箭头图标,或使用右上角的展开/折叠所有切换按钮,全局展开和折叠成员。

桌面 -vs- 移动视图

在较窄的屏幕或浏览器上查看文档,将显示针对较小外形尺寸优化的视图。桌面视图和“移动”视图之间的主要区别在于

查看类源代码

可以通过点击 API 文档页面顶部的类名,查看类源代码。可以通过点击成员行右侧的“查看源代码”链接,查看类成员的源代码。

Themer 1.4.4


顶部

使用 Themer 创建主题

在本指南中,我们将使用 Sencha Themer 创建自定义主题,并将其应用于我们的 Themer 竞赛应用程序

注意:虽然 Themer 同时支持 Modern 和 Classic 工具包,但我们将重点介绍本应用程序和演练中的 Modern 工具包。

通过完成本指南中的步骤,您将看到应用程序在浏览器中实时更新,这得益于 Fashion 的强大功能。

让我们开始,确保您的环境已设置好以运行 Themer。

先决条件

在开始之前,请确保您已下载并安装以下资产。

Ext JS

Themer 需要 Ext JS 6.0.1+ 用于 Classic Toolkit,以及 Ext JS 6.2+ 用于 Modern Toolkit。您可以在支持门户网站下载 Ext JS,也可以在您的专业软件包下载中找到它。如果您没有访问 Ext JS 的权限,可以下载 30 天免费试用

注意:UI 主题仅支持 Ext JS 6.2+。

Sencha Cmd

Themer 需要 Sencha Cmd 6.5+。Sencha Cmd 是一个免费工具,可以通过下载页面获取。如果您已经拥有 Sencha Cmd,也可以通过以下命令在命令行中更新它

sencha upgrade

Themer

您可以在您的专业软件包下载中找到 Themer。如果您没有专业软件包,可以下载 Sencha Themer 的 30 天免费试用版。

设置您的应用程序

接下来,下载我们的 Themer 竞赛应用程序

注意:您可以通过单击绿色的“克隆或下载”按钮从 Github 下载。然后只需单击“下载 Zip”并将文件保存到您的机器上。

下载完成后,解压缩“themer-contest-app-master.zip”并将生成的目录移动到您希望应用程序所在的任何位置。

将应用程序放到您想要的位置后,进入应用程序目录。

最后,执行以下命令将 Ext JS 复制到应用程序中。

sencha app install --framework=/path/to/extjs/ 

接下来,我们将使用 Modern Toolkit 创建一个主题。

为 Modern Toolkit 创建主题

从应用程序目录运行

sencha app build

sencha app watch -fashion

注意:您可能需要运行“sencha app upgrade”,具体取决于您的 cmd 版本。如果是这样,Cmd 在运行“app watch”时会提示您执行此操作。

“app watch”运行后,您可以在浏览器中打开应用程序。您将在运行 app watch 提供的地址中找到您的应用程序以全桌面模式运行。这通常是

http://localhost:1841/

您的应用程序最初看起来像

initial application view

在演练结束时,应用程序将看起来像

final application view

注意:您可以通过单击 Chrome 开发工具中的以下图标进入设备模式

toggle device toolbar button

注意:如果您在其他地方运行“sencha app watch”,您的端口可能会有所不同。检查“sencha app watch”的终端输出以获取正确的 URL。

创建新主题

首先,我们将创建一个自定义主题,它实际上是现有框架主题的副本,我们将使用 Themer 对其进行修改。

Themer 启动后,单击“创建主题”按钮。将您的自定义主题命名为“ContestApp”。

在应用程序或工作区字段中,选择您最近解压缩的“themer-contest-app-master”目录。

选择“Triton”作为基本主题,然后单击“创建主题”。

画布加载后,确保您已选择“Modern”按钮,您可以在组件列表底部找到它。

toolkit selector

您现在应该看到一个表示现代视窗的画布。

修改应用程序设置

让我们从一些非常明显的变化开始。
我们将更改应用程序的基本颜色。这是决定整个应用程序基本颜色的颜色。

基本颜色和背景颜色

让我们在您的主题默认值中将“基本颜色”更改为“#D32F2F”。

您可以通过几种不同的方式应用此十六进制值。如果您还没有使用它,您可能不会在第一个调色板中看到它。但是,切换到第二个选项卡会提供一个 Material 批准的颜色方案列表。

选择红色点,然后您会看到 700 与“#D32F2F”相关联。

您也可以单击第三个选项卡,在那里您可以与我们大多数人熟悉的颜色选择器输入进行交互。在这种情况下,您只需粘贴十六进制值即可。

如果您正在观看您的应用程序,您应该会看到整个应用程序通过 Fashion 应用新的基本颜色。

让我们做更多更改!

列表项

目前,如果我们点击列表项,我们会得到一个浅黄色的选中状态。让我们通过调整列表项来使其更具吸引力!

点击左侧组件列表中的“列表”。

向下滚动右侧的属性列表,直到找到“选中背景颜色”。

将其更改为“#757575”。

提示: 灰色材质点上的 600。

这使得我们的文本有点难以阅读,因此将“选中颜色”更改为“#FFFFFF”。

最后,我们将调整悬停颜色。将列表项的悬停状态更改为具有“#EEEEEE”的背景颜色。

提示: 灰色材质点上的 100。

看起来不错!

base color and list progress

使用 Google Fonts

Themer 还允许您在应用程序中使用 Google 字体。在更改字体之前,您需要获取 Google 字体 URL。在本例中,我们将使用“Cinzel”。转到相应的 Google Fonts 页面,点击“选择此字体”,然后从结果选择窗口(右下角)复制网络链接。

链接应该是

https://fonts.googleapis.com/css?family=Cinzel

现在,在 Themer 中,从左侧的组件树中选择“主题默认值”。接下来,突出显示字体字段,然后点击字体菜单底部的“管理网络字体”。
粘贴 Cinzel URL 并点击“完成”。

您的应用程序应该会立即更新。

左侧的导航(在桌面视图中)现在有点奇怪。点击左侧组件树中的“树”。让我们更改选中的颜色。

向下滚动到“树项选中”,并将背景颜色更改为“#FFCDD2”。

提示: 红色材质点上的 100。

接下来,让我们将一些红色更改为更微妙的颜色。

向上滚动到“树项”,并将图标颜色和展开器颜色更改为“#424242”。

提示: 灰色材质点上的 800。

styled tree

进度条背景

由于我们从蓝色更改为红色,因此进度条有点难以评估。背景颜色与白色背景太接近了。让我们通过点击左侧组件树中的“进度条”来解决这个问题。

您将看到的第一个值是“背景颜色”。

让我们将其更改为更浅的红色色调,以便进度更加清晰地突出显示。

我将使用“#EF9A9A”。

提示: 红色材质点上的 200。

复选框

我刚刚注意到我们的“待办事项清单”复选框变得难以阅读。从左侧的组件树中点击“表单字段”。然后选择“复选框”。

让我们将“选中颜色”更改为“#EF9A9A”。

我们还将“文本颜色”更改为“#EF9A9A”。

提示: 红色材质点上的 200。

现在我们的复选框更容易看到了!

设备视图

这对于桌面来说看起来相当不错!让我们看看它在移动视图中的样子。打开您的 Chrome 检查器,然后点击以下图标

image alt text

现在刷新您的浏览器以查看移动视图。

仪表盘看起来不错,所以让我们点击“扬声器”。还不错!现在让我们点击一个扬声器的名称。

看起来这个页面上的文本非常紧凑。让我们在面板中添加一些顶部填充。

从左侧的组件树中点击“面板”。然后选择“面板”子部分。

向下滚动到“面板主体”,并将所有侧面的顶部填充更改为“1em”。

现在文本有了一些呼吸的空间!

final application view

导出主题

当您对 Themer Contest 应用程序的外观和感觉感到满意后,导出您的新主题。要导出主题,只需从顶部 Themer 菜单中选择“发布”,然后选择“将主题导出为 Zip 存档”。

您的主题现在可以与其他应用程序共享了!

Themer 1.4.4