Sencha Touch 2 Sass自定义图标的使用方法
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 文件，添加如下代码
@import 'sencha-touch/default/all';
//这些是官方的，看情况可以去掉
@include sencha-panel;
@include sencha-buttons;
@include sencha-sheet;
@include sencha-picker;
@include sencha-tabs;
@include sencha-toolbar;
@include sencha-toolbar-forms;
@include sencha-indexbar;
@include sencha-list;
@include sencha-list-paging;
@include sencha-list-pullrefresh;
@include sencha-layout;
@include sencha-carousel;
@include sencha-form;
@include sencha-msgbox;
@include sencha-loading-spinner;
@include sencha-draw;
@include sencha-charts;
@include pictos-iconmask("power_on");//这就是你想添加的图片名称，省略后缀，用法：iconCls：'power_on'
@include pictos-iconmask("shield2");
@include pictos-iconmask("settings11");
@include pictos-iconmask("settings9");
@include pictos-iconmask("user_list2");
@include pictos-iconmask("doc_list");
@include pictos-iconmask("doc_drawer");
@include pictos-iconmask("data");
@include pictos-iconmask("chart2");
7.为保证正确找到图片地址，还需要编辑F:\TEST\SenchaTouch\resources\sass\config.rb文件
# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)
# Load the sencha-touch framework automatically.
load File.join(dir, 'http://www.cnblogs.com/SenchaTouch/resources', 'themes')//这里，如果不修改默认会到http://ip/resources/下面找图片
# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")
environment = :production
output_style = :compressed
8.OK了，所有的准备工作都做好了，开始生成
9.cmd进入到F:\TEST\目录下面，执行compass compile
10.成功，到F:\TEST\SenchaTouch\resources\css目录下，打开生成的sencha-touch.css文件，拷贝最后的图标css到自己系统的css文件里即可使用了。
.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.效果图 
