现在我们有了一个基本的应用来构建，我们将看一看可以用来定制应用的一些不同的视觉元素。在本章中，我们将：
在我们进入本章之前，重要的是要充分理解为单个组件设计样式和创建主题之间的区别。
几乎SenchaTouch中的每个显示组件都可以设置自己的样式。例如，panel组件可以这样使用样式：
{xtype:'panel',style:'border:none;font:12pxArialblack',html:'HelloWorld'}我们还可以为组件设置样式类，并使用外部CSS文件定义该类，如下所示：
{xtype:'panel',cls:'myStyle',html:'HelloWorld'}这些是控制单个组件显示的非常有用的选项。还有一些样式元素，例如边框、填充和边距，可以直接在组件的配置中设置：
{xtype:'panel',bodyMargin:'10555',bodyBorder:'1pxsolidblack',bodyPadding:5,html:'HelloWorld'}这些配置可以接受应用于所有方面的数字或CSS字符串值，例如，1pxsolidblack或10555。输入的数字应不带引号，但CSS字符串值必须在引号内。
这些小的改变可以帮助你设计应用的样式，但是如果你需要做一些更大的事情呢？如果要更改整个应用的颜色或外观，该怎么办？如果要为按钮创建自己的默认样式，该怎么办？
这就是主题和UI风格发挥作用的地方。我们将首先看看UI样式，然后看看如何扩展这个概念，为我们的应用创建一个整体主题。
让我们再看一看我们在上一章中创建的简单应用，并使用它开始探索带有工具栏和按钮的样式。
为了开始探索样式，我们将向应用添加第二个上部工具栏。找到上一个示例中代码的dockedItems部分：
dockedItems:[{dock:'top',xtype:'toolbar',title:'AboutTouchStart'}]在第一个工具栏的尾部大括号之后，让我们添加第二个工具栏，如下所示：
{dock:'top',xtype:'toolbar',title:'AboutTouchStart'},{dock:'top',xtype:'toolbar',items:[{text:'MyButton'}]}不要忘记在两个工具栏之间添加逗号。
额外或缺少逗号
在SenchaTouch中工作时，解析错误最常见的原因之一是多余或缺少逗号。当您在移动代码时，始终确保您已经考虑了任何游离的或丢失的逗号。幸运的是，Safari错误控制台通常会让我们很好地了解这些类型的解析错误的行号。
当您查看新工具栏时，您将看到，由于它没有标题，因此它比它上面的工具栏略短。标题使顶部的工具栏看起来比另一个工具栏大一点。您可以通过向工具栏添加height配置来控制工具栏的高度，如下所示：
{dock:'top',xtype:'toolbar',height:25,items:[{text:'MyButton'}]}height配置使用一个数字（不带引号）来确定工具栏的高度。您可以根据自己的喜好调整此数字。
这两个工具栏加在一起也显得有点暗，因此我们将使用ui配置选项更改底部工具栏的外观：
{dock:'top',xtype:'toolbar',ui:'light',items:[{text:'MyButton'}]}工具栏UI有两个初始值：dark和light.dark是默认值（由上工具栏使用）。在Safari中保存和重新加载页面时，应该会看到上下工具栏之间的对比。
按钮也有ui配置设置，但有不同的选项：
按钮的ui选项中还内置了一些颜色选项。这些颜色选项是confirm和decline。这些选项使用连字符与以前的形状选项组合。例如，confirm-small或decline-round。
让我们添加一些新按钮，看看这是什么样子。使用我们的按钮在第二个工具栏中找到items列表：
items:[{text:'MyButton'}]将旧的items列表替换为以下新的items列表：
items:[{text:'Back',ui:'back'},{text:'Round',ui:'round'},{text:'Small',ui:'small'},{text:'Normal',ui:'normal'},{text:'Action',ui:'action'},{text:'Forward',ui:'forward'}]由于按钮实际上可以在任何地方使用，我们还可以在panel容器中添加一些按钮，这样我们就可以看到ui选项、confirm和decline是什么样子的。在我们的第一个面板中找到以下行：
html:'HelloWorld
',在该行下方添加以下内容：
items:[{xtype:'button',text:'Confirm',ui:'confirm',width:100},{xtype:'button',text:'Decline',ui:'decline',width:100}],
这些简单的样式选项可以帮助您的应用更易于导航，并为用户提供重要或潜在破坏性操作的视觉线索。
与工具栏一样，底部的选项卡栏也理解light和dark的ui配置选项。但是，选项卡栏也会根据ui选项更改图标外观；light工具栏将有黑色图标，dark工具栏将有浅色图标。
这些图标实际上是黑白图像，用于在选项卡栏的颜色上创建遮罩。在本章后面，我们将向您展示如何创建自己的图标遮罩并将其集成到应用中。
在讨论图标的同时，我们还应该看看您希望在应用中包含的基本图标。
SenchaTouch中的主题是快速改变应用整体外观的强大方式。我们将在本章稍后介绍安装过程，但在开始之前，我们确实需要做一些基础工作。有很多概念性的信息需要涵盖，但是您获得的灵活性非常值得您付出努力。
我们需要介绍的第一件事是对SenchaTouch使用的工具的基本概述，这些工具使您的应用主题化成为可能：SASS和Compass。
如果您已经熟悉SASS和Compass，或者您更愿意先安装，然后再介绍概念，您可以跳到设置SASS和Compass部分。
变量允许您定义特定的值，然后在整个样式表中使用它们。变量的名称是任意的，以$开头。例如，我们可以使用SASS定义以下内容：
.box1{border:1pxsolid$blue;padding:$basePadding;margin:$baseMargin;}我们还可以使用基本的数学函数，如下所示：
.box2{border:1pxsolid$blue;padding:$basePadding*2;margin:$baseMargin/2;}这将创建一个具有两倍于第一个长方体的填充和一半边距的长方体。这对于创建灵活、可伸缩的布局非常有用。通过更改基本值，您可以快速扩展应用以处理多个具有多个分辨率和屏幕大小的设备。
此外，当您决定要更改正在使用的蓝色的色调时，您只需在一个位置进行更改。SASS还具有许多用于调整颜色的内置功能，例如：
这些功能允许您执行以下操作：
.pullQuote{border:1pxsolidblue;color:darken($blue,15%);}还有用于数字、列表、字符串和基本if-then语句的函数。这些函数有助于使样式表和编程代码一样灵活。
SASS功能，
@mixinbaseDiv{border:1pxsolid#f00;color:#333;width:200px;}然后，您可以获取该mixin并在SASS文件中使用它：
您还可以将mixin设置为使用参数，使其更加灵活。让我们看一下之前的另一个版本：
@mixinbaseDiv($width,$margin,$float){border:1pxsolid#f00;color:#333;width:$width;margin:$margin;float:$float;}这意味着我们可以设置宽度、边距和浮点值，作为SASS代码的一部分，例如：
#divLeftSmall{@includebaseDiv(100px,10px,left);}#divLeftBig{@includebaseDiv(300px,10px,left);}#divRightBig{@includebaseDiv(300px,10px,right);}#divRightAlert{@includebaseDiv(100px,10px,right);color:#F00;font-weight:bold;}这给了我们四个属性稍有不同的div标记。它们都共享mixinbaseDiv类的相同基本属性，但width和float的值不同。我们还可以覆盖mixinbaseDiv的值，在包含mixin之后添加它们，如#divRightAlert示例所示。
在HTML中，我们经常将元素嵌套在另一个元素中，以使文档具有结构。一个常见的例子是包含多个列表项的无序列表，例如：
- MainListItem1
- MainListItem2
通常，要通过CSS设置此列表的样式，您需要分别为ul元素和li元素编写规则。这两条规则在CSS文件中可能彼此不太接近，这使得调试或修改样式更加困难。
在SASS中，我们可以编写以下内容：
使用SASS编译时，生成的CSS对ul和li元素有单独的规则：
ul{width:150px;border:1pxsolidred;}ulli{margin:1px;border:1pxsolidblue;}如果要在浏览器中查看此列表，您将看到一个列表，其周围有红色边框，每个列表项周围有蓝色边框。
也可以通过符号（&）在嵌套中向上一级引用项。当向嵌套元素添加悬停状态之类的内容时，或者更一般地说，将规则的异常分组在一起时，这非常有用。
ul{width:150px;border:1pxsolidred;li{margin:1px;border:1pxsolidblue;&:hover{background-color:#B3C6FF;}}}SASS编译器将&:hover翻译成li:hover：
ulli:hover{background-color:#B3C6FF;}&特殊字符也不必在规则开头使用。假设您的设计师让您的li元素在位于特殊#sidebardiv组件中时使用更大的边框。您可以在ul/li规则之后编写单独的规则，也可以使用特殊的&字符在li规则集中添加异常：
ul{li{margin:1px;border:1pxsolidblue;&:hover{background-color:#B3C6FF;}div#sidebar&{border-width:3px;}}}这将转换为以下规则：
div#sidebarulli{border-width:3px;}您还可以嵌套CSS名称空间。在CSS中，如果所有属性都以相同的前缀开头，例如font-，那么您也可以嵌套它们：
li{font:{family:Verdana;size:18px;weight:bold;}}请务必记住将冒号放在名称空间名称之后。编译后，它将变成以下内容：
li{font-family:Verdana;font-size:18px;font-weight:bold;}这适用于任何名称空间CSS属性，例如，border-或background-。
SASS中的选择器继承类似于JavaScript中的对象继承。同样地，panel组件扩展了container对象，这意味着panel具有container的所有属性和功能，然后是一些。SASS允许您拥有继承其他对象样式的对象。
假设我们要为应用创建一些消息框元素，一个用于信息消息，一个用于错误。首先，我们应该定义一个通用框：
.messageBox{margin:10px;width:150px;border:1pxsolid;font:{size:24px;weight:bold;}}现在，在我们想要包含.messageBox样式的任何类中，我们只使用@extend指令@extend.messageBox；，单独一行：
.errorBox{@extend.messageBox;border-color:red;color:red;}.infoBox{@extend.messageBox;border-color:blue;color:blue;}然后，在我们的HTML中，我们将只使用.errorBox和.infoBox类：
Here'ssomeinformationyoumayliketohave.
Anunspecifiederrorhasoccurred. 把它们放在一起，你会看到左边的框，有蓝色的边框和蓝色的文本。右框将具有红色边框和红色文本：
正如SenchaTouch是一个基于JavaScript、CSS和HTML等低级语言构建的框架一样，Compass也是一个基于SASS和CSS构建的框架。Compass提供了一套可重用组件，用于设置应用的样式，例如：
Compass还将最新的CSS最佳实践集成到其组件中，这意味着您的样式表将更加精简和高效。
SenchaTouch主题通过提供特定于SenchaTouch功能的变量和混音，将SASS和Compass进一步推向前进。senchatouch的JavaScript部分生成许多非常复杂的HTML，以便显示各种组件，例如工具栏和面板。您不必学习SenchaTouch使用的所有复杂类和HTML技巧，只需使用适当的mixin即可更改应用的外观。
如果您决定创建自己的SenchaTouch主题，则必须同时安装SASS和Compass，它们是SenchaTouch的独立库。
安装SASS和Compass需要我们在命令行上做一些工作。由于SASS和Compass都以RubyGems的形式提供，Windows用户首先需要安装Ruby。
运行安装程序并按照屏幕上的说明安装Ruby。确保选中写着将Ruby可执行文件添加到路径的框。这将节省您以后在命令行上键入的大量内容。
安装完成后，通过进入启动运行，键入cmd，然后按进入，在Windows中打开命令行。这将打开命令行。
现在，试着输入ruby-v。您应该看到如下内容：
C:\Ruby192>ruby-vruby1.9.2p180(2011-02-18)[i386-mingw32]这意味着Ruby安装正确。
Mac和Windows用户安装SASS和Compass的说明略有不同。
Mac用户需要打开Terminal应用并键入以下内容：
sudogeminstallhamlsudogeminstallcompass您需要使用用户名和密码进行身份验证才能完成安装。
Windows用户需要打开命令行并键入以下内容：
geminstallhamlgeminstallcompass一旦安装完成，我们就可以设置文件夹并开始使用SASS和Compass。
如果您不熟悉这些命令行内容，有两个应用可以为您捆绑Ruby、SASS和Compass，并在Windows和OSX上运行：
接下来我们需要做的是创建我们自己的主题SCSS文件。在TouchStart/lib/resources/sass中找到sencha-touch.scss文件，并复制该文件。将文件的新副本重命名为myTheme.scss。
现在，我们需要告诉索引寻找我们的新主题。使用前面的示例文件，打开您的index.html文件，并找到显示以下内容的行：
请注意，我们当前包含了一个来自css文件夹的样式表，名为sencha-touch.css，并且在scss文件夹中有一个匹配的文件，名为sencha-touch.scss。编译SCSS文件时，它会在您的css文件夹中创建一个新文件。此新文件的后缀将为.css而不是.scss。
.scss是SASS文件的文件扩展名。SCSS是SassyCSS的缩写。
现在我们有了我们的路径，让我们看看我们制作的主题文件副本。打开你的myTheme.scss文件。您应该看到以下内容：
@import'sencha-touch/default/all';@includesencha-panel;@includesencha-buttons;@includesencha-sheet;@includesencha-picker;@includesencha-tabs;@includesencha-toolbar;@includesencha-toolbar-forms;@includesencha-carousel;@includesencha-indexbar;@includesencha-list;@includesencha-list-paging;@includesencha-list-pullrefresh;@includesencha-layout;@includesencha-form;@includesencha-msgbox;@includesencha-loading-spinner;此代码获取所有默认的SenchaTouch主题文件，并将它们编译为位于css文件夹中的新CSS文件。如果打开lib/resources/css文件夹中的sencha-touch.css文件，您将看到我们之前使用的压缩CSS文件。这个文件相当大，但都是从基本命令创建的。
最好的部分是，我们现在可以用一行代码更改应用的整个配色方案。
SenchaTouch主题的关键变量之一是$base_color。这种颜色及其变化贯穿整个主题。为了了解我们的意思，让我们将主题的颜色更改为漂亮的森林绿色，方法是在myTheme.scss文件的顶部添加以下内容（最重要的是其他文本）：
$base_color:#546346;接下来，我们需要重新编译SASS文件以创建样式表。从命令行，您需要切换到myTheme.scss文件所在的sass文件夹。进入文件夹后，在命令行中键入以下内容并点击输入：
compasscompile这将用新的$base_color值更新我们的myTheme.css文件。在Safari中重新加载页面，您的应用将看到一个全新的绿色森林外观。
请注意，这一行代码为深色和浅色工具栏创建了变体。更改基础颜色也会更改底部选项卡栏的图标。
这一切都很酷，但是如果我们想调整主题的各个部分呢？SenchaTouchthemes使用mixin和ui配置选项提供我们所需的内容。
compasscompile对compasswatch
Compass使用compile命令根据您的SCSS文件创建新的样式表。不过，您也可以将Compass设置为监视特定文件的更改，并在添加任何新内容时自动编译。此命令在命令行中输入如下：
compasswatchfilename提示只要终端打开，此命令将保持激活状态。关闭“终端”窗口后，需要再次运行该命令，以使Compass监视更改。
正如我们前面提到的，Sencha主题系统是一组预定义的mixin和变量，它们被编译以创建CSS样式表。每个组件都有自己的混合项和用于控制样式的变量。这意味着您可以覆盖这些变量，或者使用mixin自定义您自己的主题。
您还可以使用mixin为ui配置选项创建附加选项（除了我们前面看到的简单light和dark值）。例如，我们可以通过在myTheme.sass文件中添加新的mixin来修改工具栏的颜色。
在myTheme.sass文件中，找到表示以下内容的行：
@import'sencha-touch/default/all';在该行之后，添加以下内容：
@includesencha-toolbar-ui('subnav',#625546,'matte');此代码告诉SASS为工具栏创建一个新的ui选项。我们的新选项将被称为subnav，它的基色为#625546。最后一个选项设置渐变的样式。可用的样式有：
保存文件后，需要使用命令行上的compasscompile命令重新编译样式表。
我们还需要更改JavaScript文件中的ui配置选项。在app文件夹中找到您的touchStart.js文件并将其打开。找到应用中的第二个工具栏，就在我们添加按钮的上方。它应该如下所示：
dock:'top',xtype:'toolbar',ui:'light'您需要将ui:'light'更改为ui:'subnav'并保存文件。
然后可以重新加载页面以查看所做的更改。
您还可以使用mixin，使用pictos-iconmaskmixin组件将自定义图标掩码添加到底部的选项卡栏中。使用此函数时，需要记住两个注意事项。
首先，这些图标被用作按钮的遮罩。这意味着图标是一个仅使用黑色的透明PNG文件。然后，该图标用于通过任何黑色区域显示特定的颜色，从而显示特定的颜色。例如，在下面的屏幕截图中，信息掩码的实际PNG文件位于最左侧。根据选项卡的ui配置，它可以以多种不同的颜色出现，如下所示：
原始PNG文件也比我们的主题项目大，这允许文件被缩放以适应不同的大小。
使用pictos-iconmaskmixin组件的第二个考虑因素是，它希望图标文件位于特定文件夹/lib/resources/themimg/default/pictos中。如果打开此文件夹，您将看到文件夹中已经有许多额外的图标。
例如，我们有一个名为“bolt”的图标，但如果我们试图将其作为touchStart.js文件的一部分使用，我们最终会得到一个空白的正方形，而不是图标。我们需要使用mixin将其添加到我们的SCSS和CSS文件中。
在您的myTheme.sass文件中，找到显示以下内容的行：
@includepictos-iconmask('bolt');在本例中，我们告诉mixin为bolt.png图标文件包含一个图标掩码。mixin的参数始终是不带.png扩展名的文件名。这也是我们将用于向JavaScript文件添加图标的名称。
在touchStart.js文件中，找到表示以下内容的行：
iconCls:'info',将该管路更换为以下组件：
iconCls:'bolt',保存更改并重新加载页面以查看新图标。不要忘记在命令行上使用compasscompile重新编译SASS文件。
您也可以将自己的自定义掩码文件添加到此文件夹并调用它们，使用SASS文件中相同的pictos-iconmaskmixin功能，并将相应的iconCls配置选项添加到js文件中。只需确保它们是带有黑色图标的透明PNG文件，并将它们放在正确的文件夹中，即/lib/resources/themimg/default/pictos。
变量也可用于每个组件，用于控制特定的颜色、大小和外观选项。与mixin不同，变量针对组件的单个设置。例如，button组件包括以下变量：
还有一些变量用于禁用所有按钮（渐变、文本阴影和下拉阴影）上的所有特殊CSS效果，以及设置工具栏图标的默认大小。
例如，如果我们添加了$button-height:2em；到我们的myTheme.scss文件，然后我们可以重新编译并看到工具栏中的按钮现在比以前更大。
您还会注意到我们的确认和拒绝按钮没有改变大小。这是因为它们的UI配置(confirm和decline)已经分别定义，并且包含特定的高度。如果要更改这两个按钮的大小，则需要删除这两个按钮的UI配置。
使用senchatouch主题中包含的mixin和变量，您可以更改界面的几乎任何方面，使其看起来完全符合您的需要。有许多在线资源可以帮助您深入挖掘SASS和Compass的所有可能性。
额外资源
在为应用创建样式表时，考虑应用在多个设备上的外观也是很重要的。每个设备都有自己的屏幕大小，这限制了应用的可用区域。
我们真正需要的是一种确定我们使用的设备类型的方法。我们可以通过使用SenchaTouchis功能来实现这一点。对于以下参数，is函数只返回true或false：
您还可以使用standalone来检测应用是否已保存到主屏幕。例如，如果要检查屏幕大小，可以使用以下内容：
if(Ext.is.Tablet||Ext.is.Desktop){//usefullsizeelementshere}else{//usephonesizeelementshere}基本上，这段代码检查应用是否在平板电脑或桌面上运行。如果是的话，我们可以添加代码来创建完整的界面。如果没有在这两种设备类型中的任何一种上运行，我们可以为手机、iPod和其他小型设备创建一个较小的接口。
根据应用运行的设备，可以使用这些测试调整各种组件的大小并更改样式。下面是一个例子：
if(Ext.is.Tablet||Ext.is.Desktop){varfontSize='12px';vardefaultUI='normal';varbuttonWidth=100;}else{varfontSize='16px';vardefaultUI='large';varbuttonWidth=200;}newExt.Application({name:'TouchStart',launch:function(){varabout=newExt.Panel({fullscreen:true,title:'TouchStart',html:'Changingtypesizesbasedonthedevice',style:'font-size:'+fontSize+';',items:[{xtype:'button',text:'Mybutton',ui:defaultUI,width:buttonWidth}]});this.viewport=about;}});这个示例代码首先检查我们是在平板电脑还是台式机上运行。如果我们在这两个环境中的一个环境上运行，我们会将font-size,defaultUI和buttonWidth配置选项设置为默认大小。
如果我们在任何其他类型的设备上运行（小屏幕设备），我们会将字体大小和组件大小调大一点，以帮助提高可见性和交互。
然后，我们的应用代码用一个按钮设置一个面板，两个按钮都使用我们在上一个示例中定义的大小值。
这些类型的条件样式调整将有助于保持应用在多个设备上的可读性和可用性。
如果应用使用图像，则可能需要比条件样式（如前一节中使用的样式）更健壮的样式。为每个设备创建单独的图像集将是一场噩梦。幸运的是，Sencha的员工对这个问题有了一个答案：一个名为Sencha.ioSrc的基于web的服务。
Sencha.ioSrc是SenchaTouch的独立服务，可用于任何基于web的应用。该服务的工作原理是拍摄原始图像并动态调整其大小，以适应当前设备和屏幕大小。这些图像也由服务缓存，并针对快速、可重复的交付进行了优化。要使用Sencha.ioSrc服务，您只需更改图像的URL。
例如，基本HTML图像标记如下所示：
Sencha.ioSrc中的图像URL
通过使用该服务，我们的大图像将被缩放以适应设备屏幕的全宽，无论我们使用的设备大小如何。Sencha.ioSrc还保持图像比例正确，没有任何挤压或拉伸。
我们在应用中并不总是使用全屏图像。我们经常在应用中使用它们来显示图标和重音符号。Sencha.ioSrc还允许我们为图像指定特定的高度和/或宽度：
全尺寸图像应始终是显示所需的最大尺寸。
我们还可以使用公式根据设备的屏幕大小进行更改。例如，我们可以使用以下代码使照片比屏幕的全宽窄20像素：
我们还可以使用百分比宽度设置图像大小：
我们甚至可以结合这两个元素创建一个可伸缩的图像库：
Sencha.ioSrc提供了一些您可能会觉得有用的附加选项。第一个选项允许您动态更改图像的文件类型。例如，以下代码将以PNG格式返回您的JPG文件：
此选项还可以与调整大小选项结合使用：
通过使用Sencha.ioSrc中提供的功能，您可以为应用自动调整图像大小，并在多台设备上提供一致的外观和感觉。
在本章中，我们介绍了如何使用ui配置选项设置工具栏的样式。我们还讨论了SenchaTouch如何使用SASS和Compass创建强大的主题系统。我们包括了SASS和Compass的安装说明，并提供了mixin、变量、嵌套和选择器继承的解释。最后，我们讨论了使用Sencha.ioSrc为多个设备设计接口和处理自动图像大小调整。
在下一章中，我们将回到SenchaTouch框架。我们将回顾一下我们之前了解的关于组件层次结构的一些内容。然后，我们将介绍一些可用的更专业的组件。最后，我们将为您提供一些在SenchaTouchAPI文档中查找所需信息的技巧。
