Sencha Touch 中的主题

Sencha Touch 主题允许您将 CSS 样式组合为一个主题，以便您可以根据平台或操作系统的视觉提示定制您的应用外观。此外，主题提供对图标的访问，这些图标作为字体，这使您能够在您的应用中快速显示和缩放图标，同时减少您的应用的开销。

Sencha Touch 包含以下主题

• Cupertino 主题，为 iOS7 提供样式
• CupertinoClassic 主题，为 iOS7 之前的手机提供样式。
• MountainView 主题，为 Android 提供样式
• BlackBerry 主题，为 BlackBerry 提供样式

这些主题增强了现有的标准 Sencha Touch 和 Windows Phone 主题。

有关在 CSS 中优化主题使用的信息，请参阅 4 Tricks for Smaller CSS。

为您的应用定义平台

Sencha Touch 允许您定义平台，以便根据应用运行的平台在应用中加载资源。

在应用的 app.json 文件的以下示例中，当应用在 Chrome、Safari、iOS、Android 或 Firefox 上运行时，应用会加载 sencha-touch.css 文件

"css": [
    {
        "path": "resources/css/sencha-touch.css",
        "platform": ["chrome", "safari", "ios", "ios-classic", "android", "firefox"]
    }
]

您可以指定多个平台并使用它来加载 JS 资源。在此示例中，当平台是 Chrome、Safari 或 iOS 时，vendorfiles.js 资源会加载

"js": [
    {
        "path": "vendorfiles.js",
        "platform": ["chrome", "safari", "ios", "ios-classic"]
    }
]

每个资源仅在运行应用的设备平台与您为该资源指定的平台匹配时才会加载。

您可以通过在 URL 中使用 platform 参数来测试此功能

http://localhost/sdk/touch/examples/kitchensink/index.html?platform=ie10

您还可以通过使用 platformConfig 从应用内部检测设备运行的平台。

可用平台的列表是

• android
• blackberry
• chrome
• desktop
• firefox
• ie10
• ios
• ios-classic
• phone
• safari
• tablet

以下示例显示了适用于 desktop、Windows、BlackBerry、Cupertino、CupertinoClassic 和 MountainView 主题的 app.json CSS 语句

"css": [
    {
        "path": "resources/css/sencha-touch.css",
        "platform": ["desktop"],
        "update": "delta"
    },
    {
        "path": "resources/css/wp.css",
        "platform": ["ie10"],
        "theme": "Windows",
        "update": "delta"
    },
    {
        "path": "resources/css/cupertino.css",
        "platform": ["ios"],
        "theme": "Cupertino",
        "update": "delta"
    },
    {
        "path": "resources/css/cupertino-classic.css",
        "platform": ["ios-classic"],
        "theme": "CupertinoClassic",
        "update": "delta"
    },
    {
        "path": "resources/css/mountainview.css",
        "platform": ["android"],
        "theme": "MountainView",
        "update": "delta"
    },
    {
        "path": "resources/css/bb10.css",
        "platform": ["blackberry"],
        "theme": "Blackberry",
        "update": "delta"
    }
],

使用 platformConfig 为平台指定值

platformConfig 配置允许您为平台定义值。

Sencha Touch 中的配置系统功能强大，可让您快速开发具有丰富功能的应用。有关配置系统的更多信息，请阅读 类系统 指南。

以下示例将新类 Example.view.Login 定义为一个简单的登录表单

Ext.define('Example.view.Login', {
    extend: 'Ext.panel.FieldSet',

    config: {
        title: 'Login'
    },

    platformConfig: [{
        platform: 'ie10',
        title: 'Microsoft Login'
    }]
});

在此示例中，FieldSet 标题的值指定为 Login，但通过使用 platformConfig，您可以根据平台（在此情况下为 ie10）设置标题的值。

这是一个非常简单的示例。更复杂的示例会根据您运行的平台以不同的方式显示视图或更改视图中的项目。

主题

主题是一组 CSS 样式，您可以设置它们以更改应用在设备或平台上的外观。您可以在应用的 app.json 文件中将样式作为资源引用。

入门

Sencha Touch 提供了以下主题

• 您可以自定义的基本主题
• Sencha Touch 主题
• 具有 iOS 样式的 Cupertino 主题
• 具有 Android 样式的 Mountain View 主题
• BlackBerry 10 主题
• 适用于 Windows Phone 和 Surface 的 IE10 主题

要编写主题，请使用 Compass 和 Sass，它们在您安装 Sencha Cmd 时提供。

在以下示例中，仅当平台是 iOS 时，Cupertino 主题才会加载。当 iOS 平台加载时，您的应用会知道当前主题是 Cupertino

"css": [
    {
        "path": "resources/css/sencha-touch.css",
        "platform": ["ios"],
        "Theme": "Cupertino"
    }
]

在您的应用中，您可以使用 Ext.theme.name 访问主题名称。如果您未定义主题，则主题名称为 Default。您可以在运行应用时通过在 URL 中使用 theme 参数来测试主题

http://localhost/sdk/touch/examples/kitchensink/index.html?theme=Apple

重要：如果使用该主题，框架会使用 Windows 和 Blackberry 主题来更改框架的功能。如果您希望复制该功能，并且打算使用 Windows 或 Blackberry 主题，则还应使用这些名称。

从 Sencha Touch 2.1 升级主题

从 Sencha Touch 2.1 到 2.2 有许多更改，但升级路径相当简单。

最重要的是要意识到不再为每个组件使用混合。

我们发现为每个组件使用混合在编译 Sass 时非常慢，因此我们决定简单地使用 @import 来包含每个组件。

您的样式表以前看起来像这样

@import 'sencha-touch/default/all';

@include sencha-panel;
@include sencha-buttons;
// and other components…

但在 Touch 2.2 中看起来像这样

@import 'sencha-touch/default';

@import 'sencha-touch/default/Panel';
@import 'sencha-touch/default/Button';
// and other components

不要使用 @include 来包含组件混合，而应使用 @import 来导入组件。

如果您想在 Sencha Touch 2.2 中包含所有默认组件，可以使用以下代码

@import 'sencha-touch/default';
@import 'sencha-touch/default/all';

但是您可能想要从一个单独的文件导入这些导入，如 4 Tricks for Smaller CSS 中所述。

当您使用其他主题时也是如此。

Windows

@import 'sencha-touch/windows';
@import 'sencha-touch/windows/all';

BlackBerry

@import 'sencha-touch/bb10';
@import 'sencha-touch/bb10/all';

仅包含基本主题

@import 'sencha-touch/base';
@import 'sencha-touch/base/all';

基本主题没有像 Default、Cupertino、Mountain View、Windows 和 BlackBerry 主题那样的样式。

基本主题

Sencha Touch 2.2 引入了基本主题，它本质上是布局 Sencha Touch 组件所需的样式。没有颜色或自定义样式，如渐变、边距和内边距。它只是实际主题的起点。

使用 Sass、Compass 及其功能简化了为 Sencha Touch 开发主题。这使您可以使用变量动态更改颜色和测量值，并通过使用混合创建新的 UI。这极大地加快了基于默认 Sencha Touch 主题的自定义主题的开发。

在以前的 Touch 版本中，如果您想创建高度定制的主题，您必须使用大量技巧（如 !important）覆盖 Default 主题的大量样式。

新基本主题的优点

• 没有 Sencha Touch 组件的布局。这些已经在基本主题中为您处理。您所要做的就是根据需要对组件进行样式设置。

• 无需覆盖默认样式，因为没有默认样式。基本主题仅布局组件，这意味着它实际上是可用的。您需要在基本主题上进行构建以对其进行样式设置，但不再需要使用技巧来移除现有的样式。反过来，这减少了 CSS 的文件样式，因为您不再拥有所有那些默认样式。

• 更快的 CSS 编译。除了减少大小之外，主题还提供了更快的编译时间。Sencha Touch 使用 Compass 从 Sass 编译样式表到 CSS。在较旧的 Sencha Touch 版本中，Compass 可能需要几秒钟才能编译，因为它必须编译默认主题以及您所有的自定义样式。

现在基本主题是单独的，您只需要编译您的自定义样式 - 这意味着编译主题已经缩短到几分之一秒。这使得编写样式表变得更快。

主题示例

以下说明了 BlackBerry、Cupertino 和 MountainView 主题的按钮差异。有关每个主题的完整列表，请参阅 KitchenSink 示例。

BlackBerry 主题	Cupertino 主题	Mountain View 主题

使用现有主题

在您的 Sencha Touch 应用程序中使用默认主题之一非常简单。只需将适当的主题样式表包含到您的 app.json 文件中

"css": [
    {
        "path": "resources/css/wp.css",
        "update": "delta"
    }
]

此示例仅在 wp.css 文件中包含 Windows 主题。确保路径指向 SDK 文件夹中的正确样式表。

如果您想根据平台加载不同的主题，请将其包含在您的 app.json 文件中

"css": [
    {
        "path": "resources/css/sencha-touch.css",
        "platform": ["chrome", "safari", "ios", "android", "firefox"],
        "theme": "Default",
        "update": "delta"
    },
    {
        "path": "resources/css/wp.css",
        "platform": ["ie10"],
        "theme": "Windows",
        "update": "delta"
    },
    {
        "path": "resources/css/bb10.css",
        "platform": ["blackberry"],
        "theme": "Blackberry",
        "update": "delta"
    }
]

在此示例中，Windows 主题在 "ie10" 平台上加载，BlackBerry 主题在 "blackberry" 上加载。

所有其他设备都使用默认 Sencha Touch 主题。

扩展现有主题

扩展 Sencha Touch 中的默认主题之一也很简单。

设置自定义主题

1. 打开您的 resources/sass/app.scss 样式表，该样式表在使用 Sencha Cmd 创建应用程序时自动生成。

2. 包含您想要的 Sencha Touch 主题。此示例使用默认主题

    @import 'sencha-touch/default';
    @import 'sencha-touch/default/all';
   

   或 Windows 主题

    @import 'sencha-touch/windows';
    @import 'sencha-touch/windows/all';
   

3. 添加您的自定义 Sass 样式。

4. 编译并启动您的应用程序

    compass compile resources/sass
   

创建新主题

创建新主题与扩展默认主题非常相似，除了您只想包含基本主题。

创建新主题

1. 打开您的 resources/sass/app.scss 样式表，该样式表在使用 Sencha Cmd 创建应用程序时自动生成。

2. 包含 Sencha Touch 基本主题

    @import 'sencha-touch/base';
    @import 'sencha-touch/base/all';
   

现在您可以编写自定义 Sass，以对您的应用程序进行主题设置。

自定义主题提示

• Sencha Touch 组件始终具有与组件名称匹配的 baseCls。一些示例如下

  • Ext.List -> .x-list
  • Ext.field.Text -> .x-field-text
  • Ext.field.Numer -> .x-field-number
  • Ext.panel.Form -> .x-form-panel

• 如果您不熟悉 Sencha Touch 应用程序的 DOM 结构，请使用浏览器的 Web Inspector 检查 DOM 以确定您需要设置样式的元素。

• 您还可以使用 Web Inspector 检测基本主题用作选择器的内容

• 使用基础主题导航到列表示例

• 选择一个列表项并在 Web 检查器中打开它

  

• 浏览 DOM，直到看到选中的类“x-item-selected”（它甚至可能是选择 DOM 元素）

  

• 使用样式面板查看并复制基础主题中使用的选择器。

  

• 将选择器粘贴到 app.scss 文件中，并根据需要设置样式

   .x-list .x-list-item.x-item-selected .x-dock-horizontal,
   .x-list .x-list-item.x-item-selected.x-list-item-tpl {
       color: red;
   }
  

列表组件

Sencha Touch 中的列表组件已针对确保在每种情况下都能获得最佳性能进行了优化。

列表现在具有以下模式

• 普通项
• 无限
• 简单项
• 高度不同的项

不幸的是，这意味着列表项的 DOM 结构可能会根据列表运行的模式而改变。因此，如果您对列表或列表项进行了自定义样式，请将选择器更改为与新选择器匹配。

图标字体

Sencha Touch 2.2 中主题的一个元素是将图标作为字体的新用法。以前，缩放图标需要大量的开销，应用程序必须为图标绘制图片，然后在应用程序出现在不同的浏览器和设备上时重新绘制、重新缩放和更改它。

Touch 2.2 中的新功能是，图标现在作为字体处理，这可以实现非常快速的缩放，而无需重新绘制图片。图标显示在按钮和选项卡上。

要将现有图标转换为字体，可以使用 Pictos Server、Pictonic、icomoon.io 或 http://fontstruct.com/ — 其中一些是免费的或提供试用订阅。

使用 Pictos 字体

Pictos 字体提供了大量免费图标。您可以在 http://www.pictos.cc 上找到 Pictos 字体可用字符的完整列表。Sencha Touch 免费提供对 Pictos 字体包 的访问。

使用 Sencha Cmd 构建应用程序时，字体库将复制到您的应用程序文件中。

就像 Sencha Touch 1 和 2 一样，Sencha Touch 2.2 及更高版本将图标名称映射到实际图标，以便您可以在应用程序中使用它们

{
    xtype: 'button',
    iconCls: 'home',
    title: 'Home'
}

有关可用的 iconCls 函数的完整列表，请参阅 Ext.Button 类文档。

或者，您可以使用 Compass 图标混合将图标字体的特定字符映射到您可以在应用程序中使用的 iconCls

@include icon('home', 'H');

使用其他图标字体

Pictos 字体并不是您可以在应用程序中使用的唯一字体。如果您知道其他字体或已将自定义图标转换为字体，则使用图标混合非常容易使用该字体。

就像使用 Pictos 字体一样，您需要指定要用于图标的 iconCls 和字符。此外，您需要指定图标字体的名称，该名称需要与您拥有的图标字体的字体系列匹配，此外，您需要确保已使用图标字体混合将字体包含在您的 CSS 中。

此示例指定了自定义 MyFont 中的主页图标

@include icon('home', 'H', 'MyFont');

以下示例显示了如何使用图标字体混合包含 Pictos 字体

@include icon-font('Pictos', inline-font-files('pictos/pictos-web.woff', woff, 'pictos/pictos-web.ttf', truetype,'pictos/pictos-web.svg', svg));

第一个参数是字体名称，它必须与您用作 CSS 字体系列的名称匹配。第二个参数使用内联字体文件 Compass 函数将字体文件以 base64 编码内联到 CSS 文件中，其中包含指向字体文件的 WOFF、TTF 和 SVG 版本的路径。

可以在 https://css-tricks.org.cn/flat-icons-icon-fonts/ 上找到其他图标字体（一些付费，一些免费）的优秀列表。

Sencha Touch 1 和 2 使用 -webkit-maask 来显示和设置字体样式。不幸的是，虽然 webkit-mask 功能可在大多数 WebKit 浏览器上使用，但它不适用于非 WebKit 浏览器，如 Internet Explorer。Sencha Touch 完全支持 IE10，因此从 Sencha Touch 2.2+ 开始，webkit-mask 不再是一种选择。

创建自定义字体

网上有许多工具可用于创建您自己的图标字体。一个很好的例子是 icomoon。

创建您自己的图标字体的优势

• 您可以选择要在应用程序中使用的图标。
• 由于您选择自己的图标，因此可以减小字体的文件大小，进而减小样式表的大小。

将您自己的图标添加到您的应用程序

从 Sencha Touch 2.2.x 开始，不再支持图标的网络遮罩。相反，Touch 现在使用更灵活、更快速的网络字体。使用网络字体为您的应用程序配置新图标很简单。

1. 以 WOFF、truetype 或 SVG 格式创建您自己的网络字体文件。像 fontello 这样的网站让您可以选择、创建和下载您自定义的网络字体文件。将您的网络字体放在 resources/sass/stylesheets/fonts/ 目录的默认位置。

2. 使用 @include icon-font mixin 语句将网络字体文件包含到此 Sass 文件中。下载后，使用 @font-face mixin 将字体文件合并到您的 Compass 文件中

   @include font-face('_fontName_', inline-font-files(['_filename_', _filetype_]*));
   

   其中

   • fontName 是您的网络字体的名称。
   • filename 和 filetype 是网络字体文件的路径和类型。有效的文件类型是 woff、ttf 或 svg 值。

3. 使用 @include icon mixin 语句定义在您的字体文件中找到的图标类名。添加到此 Compass 文件后，使用唯一名称定义文件中的每个图标的名称以访问该图标。使用图标 mixin 定义图标

   @include icon('_iconName_', '_index_', '_fontName_');
   

   其中

   • iconName 是您引用的图标的唯一名称。
   • index 是在网络字体文件中找到该图标的索引（字母或十六进制代码）。
   • fontName 是您在步骤 2 中为您的网络字体文件指定的名称。

4. 使用 compass compile 命令从找到此文件的目录编译您的 Compass 文件

示例

如果您使用在线服务创建和下载您自己的网络字体文件，此示例显示了在您项目的 app.scss 文件中插入命令以添加和使用在名为 resources/sass/stylesheets/fonts/myfonts/myFonts.woff 的字体文件（位于您的应用程序目录下）中找到的字体的命令

@include font-face('myFonts', inline-font-files('myfonts/myFonts.woff', woff));
@include icon('house', '\002', 'myFonts');