ExtJS（4）- Ext5.0中的ux和FontAwesome

浏览数：44 / 时间：2015年06月09日

Ext5相较之前的版本有很大的变化，其中最明显的就是组件的样式，Ext5中的组件将会可以自适应移动终端（手机，平板）的显示，这一点上大大地增强了Ext跨平台的支持。当然还有很多值得我们期待的内容，今天我们就以ux插件的引用和FontAwesome图标为例来给我家介绍一下。

ExtJS中的ux目录是用来存放插件的，那这些插件该如何引用呢？下面我以多选组件ItemSelector为例向大家介绍下Ext5中的插件引用：

首先我们来看一下存放ItemSelector插件的路径位置：

好比上图中的ItemSelector在路径 ext-5.0.0/src/ux/form/ItemSelector.js中，那么我们只要在需要用到该插件的js中require如下路径即可

requires: [
    ‘Ext.ux.form.ItemSelector‘
],

那我们如何将 ‘./ext-5.0.0/src/ux’ 变换为‘Ext.ux’的呢？

Ext.Loader.setPath(‘Ext.ux‘, ‘./ext-5.0.0/src/ux‘);

只要在Ext加载好的时候载入上面这句，就设定了ux路径。当然载入这句的js是与ext-5.0.0文件夹同级路径的。

FontAwesome是图标字体，里面收集了很多典型的图标，且风格一致，引用简单，下面就介绍下FontAwesome该怎么引用：

在html中引入以下css

<link rel="stylesheet" type="text/css" href="style/font-awesome/css/font-awesome.min.css" />

再在Ext.onReady后运行以下代码

Ext.setGlyphFontFamily(‘FontAwesome‘);

引用代码如下，我们只要设置glyph对应图标的代码即可给所在按钮添加该图标：

me.dockedItems = [{
            xtype: ‘toolbar‘,
            border:0,
            items: [{
                text:‘Add‘,
                glyph:0xf055,
                handler: function(){
                    //
                }
            }, ‘-‘,{
                itemId: ‘delete‘,
                text: ‘Delete‘,
                glyph:0xf1f8,
                disabled: true,
                handler: function(){
                    
            }]
        }]

按钮样例：