Sencha Touch 2.2以上自定义图标教程：字体与性能优化

在Sencha Touch 2.2及后续版本中，由于对移动设备屏幕特性的适应性和性能优化的需求，Sencha Touch开始采用字体图标（font icons）替代传统的图片图标。这是因为在HTML5开发中，为不同分辨率的设备提供清晰图片资源是一项挑战，因为位图图像在放大时容易失真。字体图标作为矢量图形，无论缩放多少倍都能保持清晰，并且通过CSS样式控制方便，还能减小文件大小和加快加载速度。 要使用Sencha Touch中的自定义图标，首先要知道Sencha Architect 3中默认集成了名为"Pictos"的字体图标集。这些图标包括如"user"和"locate"等，它们在`appPath\touch\resources\themes\stylesheets\sencha-touch\base\mixins\_Class.scss`文件中定义，通过`iconCls`属性引用。 以下是使用内置图标和自定义图标的方法： 1. **使用内置图标**: - 在`appPath\resources\sass\app.scss`文件中添加需要使用的图标声明，例如：`@include icon('box')`。 - 打开命令行工具，进入`app.scss`所在的目录，运行`compass compile app.scss`命令，将SASS编译成CSS文件。 - 在组件的`iconCls`属性中设置为所选图标名称，如`box`，即可显示相应的内置图标。 2. **使用自定义图标**: - 另一个流行的自定义图标服务是IcoMoon（<https://icomoon.io>），在这个网站上，你可以上传自己的设计或者选择现有的图标库。 - 创建或导入图标包后，获取生成的CSS代码，这通常包含一个自定义的CSS类名和一个URL前缀。 - 将这些CSS类名添加到`app.scss`中，或者创建一个新的SASS文件来组织自定义图标。 - 编译CSS文件并将其与默认的Sencha Touch样式合并。 - 在组件的`iconCls`属性中使用自定义的CSS类名，如`my-custom-icon`，以显示自定义图标。 Sencha Touch 2.2以后的版本鼓励开发者利用字体图标的优势，通过SASS管理和编译CSS，灵活地定制和使用各种图标，以提高应用的性能和用户体验。同时，自定义图标的能力让开发者可以根据项目需求创建独特且高效的图标集。