许多类在使用配置对象创建(实例化)类时使用快捷名称。快捷名称被称为别名
(如果类扩展了 Ext.Component,则为xtype
)。别名/xtype 列在适用类的类名旁边,以便快速参考。
框架类或其成员可以指定为private
或protected
。否则,类/成员为public
。Public
、protected
和private
是访问描述符,用于传达类或类成员的使用方式和时间。
Public 类和类成员可供任何其他类或应用程序代码使用,并且可以作为主要产品版本中稳定且持久的成员。公共类和成员可以通过子类安全地扩展。
Protected 类成员是稳定的public
成员,旨在供拥有类或其子类使用。受保护的成员可以通过子类安全地扩展。
Private 类和类成员由框架内部使用,不打算供应用程序开发人员使用。私有类和成员可能会在任何时候更改或从框架中省略,恕不另行通知,并且不应在应用程序逻辑中依赖它们。
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 文档使用许多标志来进一步传达类成员的功能和意图。标签可以用文本标签、缩写或图标表示。
classInstance.method1().method2().etc();
false
,则标记为可预防的事件将不会触发。- 表示框架类
- 单例框架类。*有关更多信息,请参阅单例标志
- 组件类型框架类(Ext JS 框架中扩展 Ext.Component 的任何类)
- 表示该类、成员或指南在当前查看的版本中是新的
- 表示类型为config
的类成员
- 表示类型为property
的类成员
- 表示类型为method
的类成员
- 表示类型为event
的类成员
- 表示类型为theme variable
的类成员
- 表示类型为theme mixin
的类成员
- 表示该类、成员或指南在当前查看的版本中是新的
在 API 文档页面上的类名下方,有一排按钮,对应于当前类拥有的成员类型。每个按钮都显示了按类型划分的成员数量(此数量会随着过滤器的应用而更新)。单击按钮将导航到该成员部分。将鼠标悬停在成员类型按钮上将显示一个弹出菜单,其中包含该类型的所有成员,以便快速导航。
与类配置选项相关的 Getter 和 Setter 方法将显示在方法部分以及 API 文档和成员类型菜单的配置部分中,紧挨着它们所使用的配置。Getter 和 Setter 方法文档将在配置行中找到,以便于参考。
您的页面历史记录保存在本地存储中,并在顶部标题栏下方显示(使用可用的空间)。默认情况下,仅显示与您当前查看的产品/版本匹配的页面搜索结果。您可以通过单击历史记录栏右侧的按钮并选择“全部”单选按钮来扩展显示的内容。这将显示所有产品/版本的历史记录栏中的所有最近页面。
在历史记录配置菜单中,您还会看到最近页面访问的列表。结果按“当前产品/版本”和“全部”单选按钮进行过滤。单击按钮将清除历史记录栏以及本地存储中的历史记录。
如果在历史记录配置菜单中选择了“全部”,则“在历史记录栏中显示产品详细信息”的复选框选项将被启用。选中后,每个历史页面的产品/版本将与历史记录栏中的页面名称一起显示。将光标悬停在历史记录栏中的页面名称上也会显示产品/版本作为工具提示。
可以使用页面顶部的搜索字段搜索 API 文档和指南。
在 API 文档页面上,还有一个过滤器输入字段,使用过滤器字符串过滤成员行。除了按字符串过滤外,还可以按访问级别、继承和只读过滤类成员。这是使用页面顶部的复选框完成的。
API 类导航树底部的复选框过滤类列表,以包含或排除私有类。
单击空搜索字段将显示您最近的 10 次搜索,以便快速导航。
每个 API 文档页面(除了 Javascript 原语页面)都有一个与该类相关的元数据的菜单视图。此元数据视图将包含以下一项或多项
Ext.button.Button
类有一个替代类名 Ext.Button
)。通常为了向后兼容而维护替代类名。默认情况下,可运行示例(Fiddle)在页面上展开。您可以使用代码块左上角的箭头,单独折叠和展开示例代码块。您也可以使用页面右上角的切换按钮,切换所有示例的折叠状态。切换所有状态将在页面加载之间保存。
默认情况下,类成员在页面上折叠。您可以使用成员行左侧的箭头图标,或使用右上角的展开/折叠所有切换按钮,全局展开和折叠成员。
在较窄的屏幕或浏览器上查看文档,将显示针对较小外形尺寸优化的视图。桌面视图和“移动”视图之间的主要区别在于
可以通过点击 API 文档页面顶部的类名,查看类源代码。可以通过点击成员行右侧的“查看源代码”链接,查看类成员的源代码。
在本指南中,我们将使用 Sencha Themer 创建自定义主题,并将其应用于我们的 Themer 竞赛应用程序。
注意:虽然 Themer 同时支持 Modern 和 Classic 工具包,但我们将重点介绍本应用程序和演练中的 Modern 工具包。
通过完成本指南中的步骤,您将看到应用程序在浏览器中实时更新,这得益于 Fashion 的强大功能。
让我们开始,确保您的环境已设置好以运行 Themer。
在开始之前,请确保您已下载并安装以下资产。
Themer 需要 Ext JS 6.0.1+ 用于 Classic Toolkit,以及 Ext JS 6.2+ 用于 Modern Toolkit。您可以在支持门户网站下载 Ext JS,也可以在您的专业软件包下载中找到它。如果您没有访问 Ext JS 的权限,可以下载 30 天免费试用。
注意:UI 主题仅支持 Ext JS 6.2+。
Themer 需要 Sencha Cmd 6.5+。Sencha Cmd 是一个免费工具,可以通过下载页面获取。如果您已经拥有 Sencha Cmd,也可以通过以下命令在命令行中更新它
sencha upgrade
您可以在您的专业软件包下载中找到 Themer。如果您没有专业软件包,可以下载 Sencha Themer 的 30 天免费试用版。
接下来,下载我们的 Themer 竞赛应用程序。
注意:您可以通过单击绿色的“克隆或下载”按钮从 Github 下载。然后只需单击“下载 Zip”并将文件保存到您的机器上。
下载完成后,解压缩“themer-contest-app-master.zip”并将生成的目录移动到您希望应用程序所在的任何位置。
将应用程序放到您想要的位置后,进入应用程序目录。
最后,执行以下命令将 Ext JS 复制到应用程序中。
sencha app install --framework=/path/to/extjs/
接下来,我们将使用 Modern Toolkit 创建一个主题。
从应用程序目录运行
sencha app build
sencha app watch -fashion
注意:您可能需要运行“sencha app upgrade”,具体取决于您的 cmd 版本。如果是这样,Cmd 在运行“app watch”时会提示您执行此操作。
“app watch”运行后,您可以在浏览器中打开应用程序。您将在运行 app watch
提供的地址中找到您的应用程序以全桌面模式运行。这通常是
您的应用程序最初看起来像
在演练结束时,应用程序将看起来像
注意:您可以通过单击 Chrome 开发工具中的以下图标进入设备模式
注意:如果您在其他地方运行“sencha app watch”,您的端口可能会有所不同。检查“sencha app watch”的终端输出以获取正确的 URL。
首先,我们将创建一个自定义主题,它实际上是现有框架主题的副本,我们将使用 Themer 对其进行修改。
Themer 启动后,单击“创建主题”按钮。将您的自定义主题命名为“ContestApp”。
在应用程序或工作区字段中,选择您最近解压缩的“themer-contest-app-master”目录。
选择“Triton”作为基本主题,然后单击“创建主题”。
画布加载后,确保您已选择“Modern”按钮,您可以在组件列表底部找到它。
您现在应该看到一个表示现代视窗的画布。
让我们从一些非常明显的变化开始。
我们将更改应用程序的基本颜色。这是决定整个应用程序基本颜色的颜色。
让我们在您的主题默认值中将“基本颜色”更改为“#D32F2F”。
您可以通过几种不同的方式应用此十六进制值。如果您还没有使用它,您可能不会在第一个调色板中看到它。但是,切换到第二个选项卡会提供一个 Material 批准的颜色方案列表。
选择红色点,然后您会看到 700 与“#D32F2F”相关联。
您也可以单击第三个选项卡,在那里您可以与我们大多数人熟悉的颜色选择器输入进行交互。在这种情况下,您只需粘贴十六进制值即可。
如果您正在观看您的应用程序,您应该会看到整个应用程序通过 Fashion 应用新的基本颜色。
让我们做更多更改!
目前,如果我们点击列表项,我们会得到一个浅黄色的选中状态。让我们通过调整列表项来使其更具吸引力!
点击左侧组件列表中的“列表”。
向下滚动右侧的属性列表,直到找到“选中背景颜色”。
将其更改为“#757575”。
提示: 灰色材质点上的 600。
这使得我们的文本有点难以阅读,因此将“选中颜色”更改为“#FFFFFF”。
最后,我们将调整悬停颜色。将列表项的悬停状态更改为具有“#EEEEEE”的背景颜色。
提示: 灰色材质点上的 100。
看起来不错!
Themer 还允许您在应用程序中使用 Google 字体。在更改字体之前,您需要获取 Google 字体 URL。在本例中,我们将使用“Cinzel”。转到相应的 Google Fonts 页面,点击“选择此字体”,然后从结果选择窗口(右下角)复制网络链接。
链接应该是
https://fonts.googleapis.com/css?family=Cinzel
现在,在 Themer 中,从左侧的组件树中选择“主题默认值”。接下来,突出显示字体字段,然后点击字体菜单底部的“管理网络字体”。
粘贴 Cinzel URL 并点击“完成”。
您的应用程序应该会立即更新。
左侧的导航(在桌面视图中)现在有点奇怪。点击左侧组件树中的“树”。让我们更改选中的颜色。
向下滚动到“树项选中”,并将背景颜色更改为“#FFCDD2”。
提示: 红色材质点上的 100。
接下来,让我们将一些红色更改为更微妙的颜色。
向上滚动到“树项”,并将图标颜色和展开器颜色更改为“#424242”。
提示: 灰色材质点上的 800。
由于我们从蓝色更改为红色,因此进度条有点难以评估。背景颜色与白色背景太接近了。让我们通过点击左侧组件树中的“进度条”来解决这个问题。
您将看到的第一个值是“背景颜色”。
让我们将其更改为更浅的红色色调,以便进度更加清晰地突出显示。
我将使用“#EF9A9A”。
提示: 红色材质点上的 200。
我刚刚注意到我们的“待办事项清单”复选框变得难以阅读。从左侧的组件树中点击“表单字段”。然后选择“复选框”。
让我们将“选中颜色”更改为“#EF9A9A”。
我们还将“文本颜色”更改为“#EF9A9A”。
提示: 红色材质点上的 200。
现在我们的复选框更容易看到了!
这对于桌面来说看起来相当不错!让我们看看它在移动视图中的样子。打开您的 Chrome 检查器,然后点击以下图标
现在刷新您的浏览器以查看移动视图。
仪表盘看起来不错,所以让我们点击“扬声器”。还不错!现在让我们点击一个扬声器的名称。
看起来这个页面上的文本非常紧凑。让我们在面板中添加一些顶部填充。
从左侧的组件树中点击“面板”。然后选择“面板”子部分。
向下滚动到“面板主体”,并将所有侧面的顶部填充更改为“1em”。
现在文本有了一些呼吸的空间!
当您对 Themer Contest 应用程序的外观和感觉感到满意后,导出您的新主题。要导出主题,只需从顶部 Themer 菜单中选择“发布”,然后选择“将主题导出为 Zip 存档”。
您的主题现在可以与其他应用程序共享了!