《如何在senchaTouch2中自定义icon.docxVIP

Styling the user interface of a Sencha Touch application翻译者：郭玉潮（为了方便书写，本文中约定sencha touch 2简写为ST2。）本片文章主要讲述如何定制我们应用的样式，如何使用Sencha touch的主题机制中的SASS和Compass 。主要解决一下问题：我们将深入研究toolbars和buttons中layout，style和icons的使用方法来提高我们的用户视觉效果。扩展我们以前工程中的icons，主要包括定制我们自己的icons和使用base64的图标，而不使用一个真实的图片。讨论在不同设备屏幕上的一些注意事项和开发的快捷方式。深入讨论Sencha强大的主题机制，包括SASS和Compass，使用简单的CSS命令来创建复杂的视觉皮肤效果。Styling components versus themes在我们深入讨论细节之前，我们应该先弄明白创建主题和定义单个组件样式的区别。我们在ST2中，每一个组件都有一个选项来设置自己的样式的，例如，一个panel可以通过以下的方式来改变样式：{xtype: panel,style: border: none; font: 12px Arial black,html: Hello World}我们同样也可以使用一个外部的样式文件来改变组件的样式，代码如下：{xtype: panel,cls: myStyle,html: Hello World}有很多有用的选项来控制一个组件的显示效果。我们也可以在configuration中直接设置特定的样式元素例如border，padding和margin。{xtype: panel,bodyMargin: 10 5 5 5,bodyBorder: 1px solid black,bodyPadding: 5,html: Hello World}需要注意的是如果是数字值的话，不需使用引号的，但是如果是CSS字符串值的话，就需要使用引号括起来了。这些只能简单的改变一个组件的样式的，但是如果我们需要改变我们应用程序的样式的话，我们就应该好好的研究一下主题和UI样式风格了。UI styling for toolbars and buttons我们就以下面的例子来深入探讨toolbars和buttons的样式。我们现在我们上面的例子中添加两个toolbar，代码我就省略了。{dock: top,xtype: toolbar,height: 25,items: [{text: My Button}]}我们可以通过设置height值来设置我们toolbar的高度。我们可是使用ui来设置toolbar的样式的，主要有light和dark，看下面的截图吧：上面的toolbar的ui是dark，下面的toolbar 的ui是light。Styling buttonsbuttons同样有ui的配置，主要有normal，back，round，small，action，和forward。同样也有颜色的定义的，可以通过使用简单的连接符使他们链接到一起，例如：confirm-small或者decline-round。我们看截图吧，这些代码实在是简单，我就不粘了：像width值这样的设置，你可以自己查阅API文档，如果不设置的话，会占满整个panel的。Sencha Touch themesST中，Themes是一个非常有用的方法来快速改变我们应用程序的外观的。那么什么是themes呢？SASS + Compass = themes如果我们真的决定要改变我们的主题的话，我们就不得不安装SASS和Compass了，这些并不包含在ST的库文件中。首先我们要安装Ruby。Installing RubyMac中不需安装了，因为在OSX中已经安装好了，但是Windows中，需要用户自己下载并安装Ruby。并设置好PATH。我们可以在命令行中验证我们的安装的。C:\Ruby192ruby?-vruby 1.9.2p180?(2011-02-18)?[i386-mingw32]Installing SASS and Compass对于Mac和Windows用户来说，安装略有不同的。我们可以在Mac中通过终端来安装的：sudo gem install hamlsudo gem install compassWindows用户可以在命令行中安装：gem install hamlgem install compass如果你觉得这种安装方法并不适合你的话，你可以在网上搜寻捆绑了Ruby，SASS，Compass的包，直接集成安装在自己的电脑上：Scout，Compass.app。Creating a custom theme接