【翻译】在Ext JS应用程序中使用自定义图标
原文:Using Custom Icons in Your Ext JS App
作者:Lee Boonstra
Lee is a technical trainer at Sencha. She’s located in Amsterdam and has experience in both front-end and back-end development. Lee spends her spare time developing web and mobile apps. She is writing a cookbook for O'Reilly about Sencha Touch.
正如我所做的,你喜欢Ext JS 4.2的glyphs(字形)属性么?对于glyphs,可以实现从字体中创建图标。使用图标字体的优势是,他们是矢量的,因此永远不会失真,而且可以在不使用Photoshop的情况下很容易实现样式图标,以及只需要做一次页面请求就可以下载所有的图标。
属性glyphs可应用于Ext JS按钮和面板。可以从IcoMoon这样的网站下载自定义的字体或者根据自己的样式表来实现字体。属性glyphs的值是映射到它所代表的图标的Unicode字符的十进制代码。将自定义字体的名称添加到该属性会更好,如以下代码:
glyph: '115@MyIconFont',
有大量的Ext JS组件会从面板扩展,但是否考虑过在不从Ext.panel.Panel或Ext.button.Button扩展的其他组件里实现图标字体吗?
要回答这个问题,可以从以下隐藏而实际正在实行的概念入手:
一个字符在插入到确定的DOM元素之前(或之后),能看到图标是因为该字符被样式化为包含所有图标的自定义字体(@font-face技术)。
下面自己来试试这个:
- 在浏览器的开发工具内,选择想实现图标的DOM元素。理想的情况下是在它的顶部放置一个CSS类(如:箭头),这样就可以很容易的从Sass中引用它。
- 下载图标字体并将它映射到一些字符(使用以下字符:>)。
- 在Sass实现图标字体。
@font-face {
font-family: 'MyIconFont';
src: url('../resources/fonts/Nouveau.eot');
src: url('../resources/fonts/Nouveau.eot?#iefix') format('embedded-opentype'),
url('../resources/fonts/Nouveau.woff') format('woff'),
url('../resources/fonts/Nouveau.ttf') format('truetype'),
url('../resources/fonts/Nouveau.svg#Nouveau') format('svg');
font-weight: normal;
font-style: normal;
} - 好了,现在是见证奇迹的时刻。在Sass样式表,编写以下CSS规则:
.arrow:before {
content: ">"; //the character mapped to an icon
font-family: 'MyIconFont'; //the name of the icon font color: red; //set additional colors or dimensions...
margin-right: 10px; }
伪CSS选择符“:befor”会在DOM元素的左边创建图标。伪CSS选择符“:affter”会在DOM元素的右边创建图标。
现在已经了解了如何使用这项技术,就可以在任何组件来尝试它了,如模板、数据视图、表单字段等等。
想了解更多么?Sencha将在1月27日到31日在线直播提供高级Ext JS主题培训。鳄鱼看一看位于世界各地的开放式课程或参加网上培训。
【翻译】在Ext JS应用程序中使用自定义图标的更多相关文章
- 【翻译】在Ext JS应用程序中构建可维护的控制器
原文:Building Maintainable Controllers in Ext JS Apps 你好You Had Me 你是Tearing Me Apart 模板We Dont Need t ...
- 【翻译】Ext JS 6.2 早期访问版本发布
原文:Announcing Ext JS 6.2 Early Access 非常开心,Sencha Ext JS 6.2早期访问版本今天发布了.早期访问版本的主要目的是为了让大家进行测试并评估Ext ...
- 【翻译】Ext JS 6早期访问版本发布
早期访问版本是什么 如何参与 都包括什么 Sencha Ext JS 6 Sencha Pivot Grid Sencha Cmd 6 JetBrains IDE插件 反馈 原文:Announcing ...
- 【翻译】Ext JS最新技巧——2016-3-4
原文:Top Support Tips Kevin Cassidy:Grid水印 Ext JS的Grid是一个便于在布局中显示信息的伟大工具.有些用户可能会希望将这些信息打印为会议资料或宣传材料,而且 ...
- 【翻译】Ext JS最新技巧——2015-10-21
原文:Top Support Tips Kevin Cassidy:全宽度的字段错误信息 有考虑过让验证信息显示在表单字段的下面(msgTarget:'under'),但最后发现验证信息被压缩显示了吗 ...
- 【翻译】Ext JS最新技巧——2015-8-11
原文:Top Support Tips Seth Lemmons:使用棒极了的Awesome Font Ext JS 6附带了一个新的海卫一主题,可以使用Font Awesome字体作为背景图像的图标 ...
- 【翻译】Ext JS 6 Beta发布
原文:Ext JS 6 Beta is Now Available 概述 Ext JS 6的好处 新的Ext JS功能和工具 需要你的反馈意见 概述 很高兴,Ext JS 6 beta版本现在发布了. ...
- 【翻译】Ext JS 6有什么新东西?
工具包ToolKits 发布 包的命名 Fashion 图表 ItemEdit插件 网格 电子表格 可操作模式Actionable Mode和可访问性 LazyItems插件 屏幕阅读器支持可访问性 ...
- 【翻译】Ext JS——高效的编码风格指南
原文:ExtJS - Efficient coding style guide 作者:Raja 切勿使用"new"关键字:在Ext JS中,使用"new"关键字 ...
随机推荐
- (译)快速指南:用UIViewPropertyAnimator做动画
翻译自:QUICK GUIDE: ANIMATIONS WITH UIVIEWPROPERTYANIMATOR 译者:Haley_Wong iOS 10 带来了一大票有意思的新特性,像 UIViewP ...
- openresty 备忘
The problem with: apt-get --yes install $something is that it will ask for a manual confirmation if ...
- 保存图片到SD卡
添加SD卡写权限 方法 public void saveMyBitmap(String bitName, Bitmap mBitmap) { File f = new File("/sdca ...
- Android简易实战教程--第二十七话《自定义View入门案例之开关按钮详细分析》
转载此博客请注明出处点击打开链接 http://blog.csdn.net/qq_32059827/article/details/52444145 对于自定义view,可能是一个比较大的 ...
- FORM中调用JAVA组件
调用方式: 链接:可以在一个数据块中创建专门的 Bean Area项,使用 Implementation Class 特性链接到J a v a B e a n,使用W h e n - C u s t ...
- Android首选项SharedPreference-android学习之旅(六)
SharedPrefenence采用的键值对的方式来进行存储,采用内部存储的方式. 实例 public class MainActivity extends Activity { private Sh ...
- 3.QT中的debug相关的函数,以及文件锁的使用
1 新建项目T33Debug main.cpp #include <QDebug> #include <QFile> #include <QMutex> ...
- 运用 三种 原生 谷歌 阿里 解析和生成json
三种类生成JSON数据方法 JSON(原生): 第一种 JSONStringer和JSONObject区别在于添加对象时是按顺序添加的比如说 JSONStringer 添加 a:1 b:2 c:3那么 ...
- 【java线程系列】java线程系列之java线程池详解
一线程池的概念及为何需要线程池: 我们知道当我们自己创建一个线程时如果该线程执行完任务后就进入死亡状态,这样如果我们需要在次使用一个线程时得重新创建一个线程,但是线程的创建是要付出一定的代价的,如果在 ...
- 套接字输入流——InputStream
输入缓冲装置里面必须要包含读取字符的通道,否则就谈不上缓冲了,这个通道就是InputStream,它属于jdk中java.io包的类,有了它我们就可以从源头读取字符,它的来源可以有多种多样,这里主要探 ...