ExtJS (4)-UX and Fontawesome in Ext5.0

Ext5 compared to the previous version has a great change, the most obvious is the style of the components, EXT5 components will be able to adapt to the mobile terminal (mobile phone, tablet) display, which greatly enhanced the Ext cross-platform support. Of course there are a lot of things to look forward to, today we will use the UX plugin reference and Fontawesome icon as an example to introduce to my home.

The UX directory in ExtJS is used to store plugins, so how can these plugins be referenced? Here I take the multi-select component Itemselector as an example to introduce you to the following EXT5 in the plug-in reference:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/57/1A/wKiom1SROyWRgHIdAADSlc4OfJk529.jpg "title=" QQ picture 20141217161247.png "alt=" Wkiom1sroywrghidaadslc4ofjk529.jpg "/>

First let's take a look at the path location where the Itemselector plugin is stored:

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M00/57/19/wKiom1SRNeriA-B5AADWMJx3GV8821.jpg "title=" QQ picture 20141217154943.png "alt=" Wkiom1srneria-b5aadwmjx3gv8821.jpg "/>

Like in the Itemselector in the path ext-5.0.0/src/ux/form/itemselector.js, then we just need to use the plug-in JS require the following path can be

Requires: [' Ext.ux.form.ItemSelector '],

So how do we transform './ext-5.0.0/src/ux ' into ' ext.ux '?

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

The UX path is set as long as the above sentence is loaded when Ext loads well. Of course, the JS is loaded into this sentence with the ext-5.0.0 folder sibling path.

Fontawesome is the icon font, which collects a lot of typical icons, and style consistent, simple reference, the following describes the following fontawesome how to quote:

Introduce the following CSS in HTML

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

Then run the following code after Ext.onready

Ext.setglyphfontfamily (' Fontawesome ');

The reference code is as follows, as long as we set the code for the glyph corresponding icon to add the icon to the button:

Me.dockeditems = [{            xtype:   ' toolbar ',            border:0,             items: [{                 text: ' Add ',                 glyph:0xf055,                 handler: function () {                     //                 }             },  '-',{                 itemid:  ' Delete ',                 text:  ' Delete ',                 glyph:0xf1f8,                 disabled: true,                 handler: function () {                                  }]        }]

button Example: 650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/57/1A/wKiom1SRO82g6dtkAAAUL0opjVA976.jpg "title=" QQ picture 20141217161528.png "alt=" Wkiom1sro82g6dtkaaaul0opjva976.jpg "/>

This article is from the "Snow July" blog, please be sure to keep this source http://xuepiaoqiyue.blog.51cto.com/4391594/1591108

ExtJS (4)-UX and Fontawesome in Ext5.0