ext中引用ux_ExtJS（4）- Ext5.0中的ux和FontAwesome

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

再在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(){

}]

}]

按钮样例：