jQuery MiniUI,快速开发WebUI界面

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.效果图

作者:云极科技
原文:http://www.cnblogs.com/qidian10/archive/2012/11/19/2776953.html