• 效果如图 使用方法 ...glyph方式: { text: '关闭', glyph: 'xf00d@FontAwesome', handler: function() { //随你 } } iconCls方式: { text: '关闭', iconCls : 'fa fa-line-chart', h...

    效果如图

    使用方法

    效果一样喜欢哪个用哪个

    glyph方式:

    {
        text: '关闭',
        glyph: 'xf00d@FontAwesome',
        handler: function() {
    		//随你
        }
    }

    iconCls方式:

    {
        text: '关闭',
        iconCls : 'fa fa-line-chart',
        handler: function() {
    		//随你
        }
    }

     

    样式网站:去找你喜欢的

    https://fontawesome.com/cheatsheet?from=io

     

     

     

    ExtJS附带三个Web字体包,可与您的应用程序一起使用。这些Web字体可用于指定用于提供iconCls或 glyph配置属性的组件的图标。

     

    字体图标表

    下面是参考表,其中提供了每个Font包中找到的可用图标的列表。这些表显示了用于glyph config属性的图标本身,字符或十六进制代码以及用于config属性的CSS类名iconCls

     

    展开全文
  • 看到对应的图标就可以得到相应的glyph数字哦。简单易用,转化成pdf随时可以使用的哦 可以参照 http://blog.csdn.net/sushengmiyan/article/details/38458411 简单实现部分
  • 跟我一起学extjs5(06--使用图标字体来美化按钮)  sencha 的例子中,有使用图标字体来美化按钮的例子,这个用起来又方便风格又统一,例如下图:  上面图标字体的使用方法也很简单,只要下载Font Awesome的css...


    跟我一起学extjs5(06--使用图标字体来美化按钮)


            sencha 的例子中,有使用图标字体来美化按钮的例子,这个用起来又方便风格又统一,例如下图:



            上面图标字体的使用方法也很简单,只要下载Font Awesome的css和图标文件,放到项目里就可以了。部分图标截图:


            Font Awesome的网站为:点击打开链接。进入网站后,先下载Font Awesome 3.0,解压缩后,将css和font目录拷贝到war目录下。
    (Font Awesome最新版本为4.0,网址为:http://fontawesome.io/ )


            文件拷贝进来以后,需要在index.html中引入css文件。
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    
    <title>app</title>
    
    <!-- 引入Font Awesome的css文件 -->
    <link type="text/css" rel="stylesheet" href="css/font-awesome.css">
    
    <!-- The line below must be kept intact for Sencha Cmd to build your application -->
    <script id="microloader" type="text/javascript" src="bootstrap.js"></script>
    
    </head>
    <body></body>
    </html>
    

            至此准备工作结束,可以字体文件可以使用了。对于一个Button来说,在其文字前面放一个图标可以使用属性icon,iconCls,对于图标字体来说,可以使用iconCls属性,也可以使用glyph这个属性。我们先来看一段该css之中的设置:
    /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
       readers do not read off random characters that represent icons */
    .icon-glass:before {
      content: "\f000";
    }
    .icon-music:before {
      content: "\f001";
    }
    .icon-search:before {
      content: "\f002";
    }
    .icon-envelope-alt:before {
      content: "\f003";
    }
            从其css的描述中可以看出,其命名中就表示了该图标的名称,比如说icon-search是一个搜索的图标,在Button使用的时候,可以这样加入属性:

    {
    						text : '搜索',
    						iconCls : 'icon-search'
    					}, {
    						text : '设置',
    						glyph : 0xf0c9
    					}
            这二种方式加入的icon会有不同之处:,可以看出来用glyph设置的更好一些。为了找到这个数字,你先要去Font Awesome 网站上找到你需要的图标,记下名称,然后打开 css 目录下的 font-awesome.css,从中找到该名称的.class值,然后记下content的值。现在我们对top和bottom中的相应按钮加入图标字体。
    Ext.define('app.view.main.region.Top', {
    
    			extend : 'Ext.toolbar.Toolbar',
    
    			alias : 'widget.maintop', // 定义了这个组件的xtype类型为maintop
    
    			items : [{
    						xtype : 'image',
    						bind : { // 数据绑定到MainModel中data的system.iconUrl
    							hidden : '{!system.iconUrl}', // 如果system.iconUrl未设置,则此image不显示
    							src : '{system.iconUrl}' // 根据system.iconUrl的设置来加载图片
    						}
    					}, {
    						xtype : 'label',
    						bind : {
    							text : '{system.name}' // text值绑定到system.name
    						},
    						style : 'font-size : 20px; color : blue;'
    					}, {
    						xtype : 'label',
    						bind : {
    							text : '{system.version}'
    						}
    					}, '->', {
    						text : '菜单',
    						glyph : 0xf0c9,
    						menu : [{
    									text : '工程管理',
    									menu : [{
    												text : '工程项目'
    											}, {
    												text : '工程标段'
    											}]
    								}]
    					}, ' ', ' ', {
    						text : '主页',
    						glyph : 0xf015
    					}, {
    						text : '帮助',
    						glyph : 0xf059
    					}, {
    						text : '关于',
    						glyph : 0xf06a
    					}, {
    						text : '注销',
    						glyph : 0xf011
    					}, '->', '->', {
    						text : '搜索',
    						glyph : 0xf002
    					}, {
    						text : '设置',
    						glyph : 0xf013
    					}]
    
    		});

    Ext.define('app.view.main.region.Bottom', {
    
    			extend : 'Ext.toolbar.Toolbar',
    
    			alias : 'widget.mainbottom',
    
    			items : [{
    						bind : {
    							text : '使用单位:{user.company}'
    						},
    						glyph : 0xf0f7
    					}, {
    						bind : {
    							text : '用户:{user.name}'
    						},
    						glyph : 0xf007
    					}, '->', {
    						bind : {
    							text : '{service.company}'
    						},
    						glyph : 0xf059
    
    					}, {
    						bind : {
    							text : '{service.name}'
    						}
    					}, {
    						bind : {
    							text : '{service.phonenumber}'
    						},
    						glyph : 0xf095
    					}, {
    						bind : {
    							hidden : '{!service.email}', // 绑定值前面加!表示取反,如果有email则不隐藏,如果email未设置,则隐藏
    							text : 'eMail:{service.email}'
    						},
    						glyph : 0xf003
    					}, {
    						bind : {
    							text : '©{service.copyright}'
    						}
    					}]
    		});

            在修改了上面的glyph之后,还不能正确的显示图标,必须指定一下字体才行。修改Main.js,在里面加入初始化函数。

    	initComponent : function() {
    		Ext.setGlyphFontFamily('FontAwesome'); // 设置图标字体文件,只有设置了以后才能用glyph属性
    		this.callParent();
    	},
    

            经过以上的操作,图标字体就可以正常显示了。具体效果如下:


            细节决定成败,虽然加了图标字体的按钮比较好看,但是最好把外框和背景去掉,只有鼠标移上去的时候才显示。下一节我们继续Button创建一个自定义的Button,让他的背景是透明的。


    展开全文
  • 下载Font Awesome 1.拷贝css 和 fonts 到build同级目录 ... 3.在main.js文件中添加   ...1 initComponent : function() { ...2 Ext.setGlyphFontFamily('Font... // 设置图标字体文件,只有设置了以后才能用glyph属...

    下载 Font Awesome

    1.拷贝css 和 fonts 到build同级目录

    2.需要在index.html中引入css文件

    3.在main.js文件中添加

      

    1 initComponent : function() {  
    2     Ext.setGlyphFontFamily('FontAwesome'); // 设置图标字体文件,只有设置了以后才能用glyph属性  
    3     this.callParent();  
    4 },

     

    4.在组件中使用

    text: '主页',
    glyph: 0xf015   //这个需要根据自己的组件查

     

    注意: 如果没有成功,很可能是没有引入 bootstrap.js

    转载于:https://www.cnblogs.com/shaoshao/p/4109490.html

    展开全文
  • 最近在弄这个extjs的desktop控件....发觉图标很那个...纠结... 就是在sample.js的里面window声明里的设置iconCls以外,还要到css里面添加对应的css
    最近在弄这个extjs的desktop控件....发觉图标很那个...纠结...

    就是在sample.js的里面window声明里的设置iconCls以外,还要到css里面添加对应的css
    展开全文
  • 1. 使用Font Awesome,下载地址... 2. 把font和css目录放到 Ext的app目录下面 ... <!-- 引入Font Awesome的css文件 --> <link type="text/css" rel="styleshee...

    1. 使用Font Awesome,下载地址http://www.bootcss.com/p/font-awesome/#icons-new

    2. 把font和css目录放到 Ext的app目录下面

    3. 在index.html中加载

    <!-- 引入Font Awesome的css文件 -->
    <link type="text/css" rel="stylesheet" href="css/font-awesome.css">

    4. 在main.js中设置

    initComponent : function() {
      Ext.setGlyphFontFamily('FontAwesome'); // 设置图标字体文件,只有设置了以后才能用glyph属性
      this.callParent();
    }

    5.使用

    {  

       text : '搜索',  

       iconCls : 'icon-search'   //这个按钮要到http://www.bootcss.com/p/font-awesome/#icons-new 这个网站去找相应的值

    }, {  

      text : '设置',  

      glyph : 0xf0c9           // 这个是用 'icon-search' 到css目录下面的font-awesome.css中去找对应的字符串,记住content的值,在前面加入一个0x并把 \符号去掉就可以了

    }  

      

    转载于:https://www.cnblogs.com/shaoshao/p/4450859.html

    展开全文
  • 使用sencha cmd 自动构造出来的程序,按钮就是一个普通的按钮,面板也是普通的面板,如果我想对按钮增加一个图标,是不是会更好看呢?本节介绍一种简单的给ext js程序增加fontawesome提供的图标的方法。
  • 通过软件 可以看到ttf的字体图标库 是使用的话很简单 找到如图文件↑ 根据需求定义具体的图表↑ 调用的话如图, 最后编译生效! 转载于:https://www.cnblogs.com/Conker/p/6927930.html...
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • Ext5相较之前的版本有很大的...当然还有很多值得我们期待的内容,今天我们就以ux插件的引用和FontAwesome图标为例来给我家介绍一下。ExtJS中的ux目录是用来存放插件的,那这些插件该如何引用呢?下面我以多选组件I...
  • sencha 的例子中,有使用图标字体来美化按钮的例子,这个用起来又方便风格又统一,例如下图: 上面图标字体的使用方法也很简单,只要下载Font Awesome的css和图标文件,放到项目里就可以了。部分图标截图: ...
  • 方法来源于sencah论坛 ------------------------------- Ext.define('Fiddle.tree.Column', {  override: 'Ext.tree.Column',    cellTpl: [  '',  '  '{parent.elbowCls}-l
  • 实例代码使用方法: 1.第一步:使用sencha cmd 创建项目 名称需要注意 输入为oaSystem 我使用的命令如下:sencha -sdk E:\openSrc\ext-5.0.0 generate app oaSystem E:\workspaces\myeclipse2014\csdn ...
  • sencha 的例子中,有使用图标字体来美化按钮的例子,这个用起来又方便风格又统一,例如下图: 上面图标字体的使用方法也很简单,只要下载Font Awesome的css和图标文件,放到项目里就可以了。部分图标截图: ...
  • 本文地址:http://blog.csdn.net/sushengmiyan/article/details/38515499本文作者:sushengmiyan-------------------------------------------------------------资源链接-----------------------------------------...
  • 正如我所做的,你喜欢Ext JS 4.2的glyphs(字形)...使用图标字体的优势是,他们是矢量的,因此永远不会失真,而且可以在不使用Photoshop的情况下很容易实现样式图标,以及只需要做一次页面请求就可以下载所有的图标
  • ExtJS5 实现树形菜单

    2018-05-16 14:45:40
    首先利用sencha建立extjs的工程,然后是对页面顶部和底部布局的添加以及按钮的美化,因为只要记录的是菜单的生成,就不记录了。具体工程我会上传,因为是自己练练手的东西,所以写的很杂。~~~~~~~~~~~~~~~~~~~~~~~~~...
  • Ext JS团队专心打造的技术专题文章,为Ext JS开发人员提供更广阔的使用技巧。
  • 本文地址:http://blog.csdn.net/sushengmiyan/article/details/38458411本文作者:sushengmiyan-------------------------------------------------资源链接-----------------------------------------------------...
1 2 3 4 5 6
收藏数 110
精华内容 44
热门标签