Sencha Touch 2 Sass自定义图标的使用方法

最新推荐文章于 2020-07-08 06:02:22 发布

l498948617

最新推荐文章于 2020-07-08 06:02:22 发布

阅读量715

点赞数

文章标签： sencha

Sencha Touch 提供的默认图标有限，api上只有这么几个

但为了方便扩展，sencha touch早已经给我们准备了若干的图标文件和sass代码，方便后期的css自定义等。

图标文件在：\resources\themes\images\default\pictos 下面，如果不够用，你可以放置自己的png格式图片。

如何自定义自己的图标呢？

由于我们是window系统，必须先安装ruby环境，因为sass和compass工具依附于ruby。

1.360里下载安装ruby

2.执行 gem install haml

3.执行gem install compass

4.OK安装完成，可以生成CSS了。

5.准备目录，例如Sencha Touch的sdk放在目录：http://localhost/SenchaTouch/ 下面，那么你的图标访问地址应该是

　http://localhost/SenchaTouch/resources/themes/images/default/pictos/图片名称.png

　确定这一点后，拷贝SenchaTouch/resources/下面的所有文件到另一个目录，例如F:\TEST\SenchaTouch\resources\

6.编辑F:\TEST\SenchaTouch\resources\sass\sencha-touch.scss 文件，添加如下代码

 
   01. 
   @import 'sencha-touch/default/all'; 
  
   02. 
   //这些是官方的，看情况可以去掉 
  
   03. 
   @include sencha-panel; 
  
   04. 
   @include sencha-buttons; 
  
   05. 
   @include sencha-sheet; 
  
   06. 
   @include sencha-picker; 
  
   07. 
   @include sencha-tabs; 
  
   08. 
   @include sencha-toolbar; 
  
   09. 
   @include sencha-toolbar-forms; 
  
   10. 
   @include sencha-indexbar; 
  
   11. 
   @include sencha-list; 
  
   12. 
   @include sencha-list-paging; 
  
   13. 
   @include sencha-list-pullrefresh; 
  
   14. 
   @include sencha-layout; 
  
   15. 
   @include sencha-carousel; 
  
   16. 
   @include sencha-form; 
  
   17. 
   @include sencha-msgbox; 
  
   18. 
   @include sencha-loading-spinner; 
  
   19. 
   @include sencha-draw; 
  
   20. 
   @include sencha-charts; 
  
   21. 
   @include pictos-iconmask("power_on");//这就是你想添加的图片名称，省略后缀，用法：iconCls：'power_on' 
  
   22. 
   @include pictos-iconmask("shield2"); 
  
   23. 
   @include pictos-iconmask("settings11"); 
  
   24. 
   @include pictos-iconmask("settings9"); 
  
   25. 
   @include pictos-iconmask("user_list2"); 
  
   26. 
   @include pictos-iconmask("doc_list"); 
  
   27. 
   @include pictos-iconmask("doc_drawer"); 
  
   28. 
   @include pictos-iconmask("data"); 
  
   29. 
   @include pictos-iconmask("chart2");

7.为保证正确找到图片地址，还需要编辑F:\TEST\SenchaTouch\resources\sass\config.rb文件

 
   01. 
   # Get the directory that this configuration file exists in 
  
   02. 
   dir = File.dirname(__FILE__) 
  
   03. 
     
   04. 
   # Load the sencha-touch framework automatically. 
  
   05. 
   load File.join(dir, 'http://www.cnblogs.com/SenchaTouch/resources', 'themes')//这里，如果不修改默认会到http://ip/resources/下面找图片 
  
   06. 
     
   07. 
   # Compass configurations 
  
   08. 
   sass_path    = dir 
  
   09. 
   css_path     = File.join(dir, "..", "css") 
  
   10. 
     
   11. 
   environment  = :production 
  
   12. 
   output_style = :compressed

8.OK了，所有的准备工作都做好了，开始生成

9.cmd进入到F:\TEST\目录下面，执行compass compile

10.成功，到F:\TEST\SenchaTouch\resources\css目录下，打开生成的sencha-touch.css文件，拷贝最后的图标css到自己系统的css文件里即可使用了。

1. .x-tab .x-button-icon.chart2,.x-button .x-button-icon.x-icon-mask.chart2{-webkit-mask-image:url(

'data:image/png;base64,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'

)}

11.效果图