原文链接：http://blog.csdn.net/lovelyelfpop/article/details/50853591
英文原文：Using Plugins and Mixins in Your Sencha Apps
概述
当须要扩展一个类的功能的时候，通常都会直接将新功能写入派生类，然而，假设多个组件都须要实现某个功能，那最有效的方式就是将它定义为一个插件或Mixin。插件和Mixin都是用来将额外功能加入到其它类的类。在本文，将介绍这些类是什么，他们之间的差别，以及他们的原理。在Sencha Fiddle。我们准备了一些演示样例来演示这些概念。
插件是什么且怎样使用它？
插件是一个类，用来为 Ext.Component（或派生于 Ext.Component的类）加入或改动功能，与其它类一样，插件要使用Ext.define方法来定义，且扩展于Ext.plugin.Abstract。
// Simple example showing how to define a plugin
// extending form Ext.plugin.Abstract
Ext.define('Fiddle.plugin.SamplePlugin', {
extend: 'Ext.plugin.Abstract',
alias: 'plugin.sampleplugin',
init: function (cmp) {
this.setCmp(cmp);
}
});
有趣的是，它是你所定义的插件类中，必须有init(cmp)方法。由于该方法需会被组件的构造函数调用（在组件渲染之前）。插件声明在组件的“plugins”配置项中。它能够在类的定义内声明【演示样例】，或者在类的实例中【演示样例】声明。
在从Ext.plugin.Abstract的扩展创建插件的时候，默认会接收到init、destroy、enable和disable这4个方法。
以下来介绍一下怎样才干有效的使用这些方法。
init
方法init是插件的入口。它同意插件在组件渲染之前插入组件并与组件进行交互。在这个阶段，插件须要将组件的引用存下来，以便插件里的其它方法能够非常easy的使用它。Ext.plugin.Abstract 提供了两个訪问器方法来引用使用该插件的组件。
-
setCmp：在init(cmp)内。可使用setCmp(cmp)来把组件的引用存下来。这样，插件内就可通过getCmp方法来得到组件的引用。
-
getCmp：该訪问器方法可被插件内其它方法使用。
方法getCmp尤为主要。由于插件与它的方法是在插件的作用域范围内工作，也就是说，this引用的是插件自身。而不是使用插件的组件。当插件须要与它拥有者的组件的进行交互的时候，訪问方法（getter）就可在訪问客户组件的时候派上用场。
方法init能够在init被处理的时候设置插件逻辑，可能还须要在它拥有者组件的HTML渲染后再次设置插件逻辑。
比如，一个拖拽区域就须要在组件的HMTL被渲染到DOM后才干被创建。
在这样的情形，就须要监听客户组件的afterrender事件并在这时候设置组件的功能。【演示样例】
destroy
插件的destroy方法会在组件销毁的时候被调用。通过插件创建的不论什么类实例（比如。拖与放、键盘导航等等）须要在这时候以编程的方式显式地被销毁。
还有，不论什么被设置到组件实例的属性也必须被设置为null或删除。【演示样例】
enable/disable
方法enable仅仅是用来将插件的disabled属性设置为false的，而disable方法会将disabled设置为true。
在创建自己的插件时，能够扩展该功能。还能够在处理之前先检測disabled状态来决定是否使用不论什么插件逻辑。你还能够更进一步去使用他们。详细取决于你的需求。【演示样例】
获取对插件的引用
在使用的时候，因为插件中定义的方法是属于插件而不是组件。因而，须要从组件获取一个引用并将它返回个插件来调用它的方法。又或者，将插件的方法绑定到组件会更方便。【演示样例】
在定义插件类的时候。给插件的别名这样一个前缀非常实用：alias:plugin.mypulugin。
在客户组件使用插件的时候，就能够非常easy的通过类型来设置插件：
plugins: [{
ptype: 'myplugin'
}]
别名同意使用组件的findPlugin方法来搜索插件的引用。比如：
var thePlugin = owningClass.findPlugin(‘myplugin');
最后，还能够使用组件的getPlugin方法和pluginId来引用插件。
plugins: [{
ptype: 'myplugin',
pluginId: 'myPluginId';
}]
var thePlugin = owningClass.getPlugin('myPluginId');
Mixin是什么且怎样去使用它？
Mixin也是用来为类加入功能的类。
然而，它与插件的运作方式有下面的不同：
-
Mixin能够将功能加入到不论什么类，而插件仅仅能用于Ext.Component类
-
Mixin仅仅能在类的定义内声明mixins配置项，而插件则既能够在类定义内，也能够在类的实例中声明。
-
Mixin或许是为了不论什么类设计的（请參阅Ext.mixin.Observable，它为不论什么混入了它的类增加了事件的触发/监听机制）。可是它能够更明白的混入特定的类（请參阅Ext.panel.Pinnable被设计为仅仅能混入Panel类）。
-
Mixin内定义的方法会被应用到目标类的原型(prototype)中去。
当创建了一个使用Mixin的类的实例的时候，就能够直接在类中调用不论什么Mixin定义的方法。这些方法的内的this作用域就是类自身。【演示样例】有可能在Mixin中定义的方法会与类自身的方法同名。
在这样的情况，Mixin方法就不会被拷贝到目标类的原型。
这时。调用该类的方法将会一直是类自身的方法。
要调用同名的Mixin方法，就要从所属类中获取到Mixin的引用，然后再直接调用Mixin方法。在直接调用Mixin的方法时，它的作用域将是Mixin类，因而，this指向的会是Mixin类自身【演示样例】。
如以下演示样例，假设Mixin有一个Mixin的id为util，调用Mixin定义的destroy方法将会是这样：
this.mixins.util.destroy.call(this);
定义自己的Mixin
虽然我们建议通过扩展Ext.Mixin来定义Mixin了，但Mixin也能够通过Ext.define来直接定义。通过扩展Ext.Mixin来定义的主要优点是在定义Mixin类的时候，同意定义“钩子(Hooks)”。
钩子是定义在Mixin内的方法，会在接收类的对应的方法之前或之后自己主动被调用，比如，要确保Mixin的afterDestroy方法在类被销毁之后调用，能够使用after钩子：
mixinConfig: {
after: {
destroy: 'afterDestroy'
}
}
怎样去使用“before”、“after”、“on”和“extended”钩子的很多其它细节。可參阅Ext.Mixin API文档的顶部描写叙述。
使用自己的Mixin
使用自己Mixin的首选方式是在数组中使用完整的类名。配置项mixins中的Mixin类会按照数组中的列出的顺序进行处理。
mixins: [
'My.utility.MixinClass' // "util" is used to reference the mixin
]
对象语法（參阅以下的选项2）提供了后向兼容，只是不建议这样。由于键名这样就不符合Mixin类的id定义。
获取Mixin类的引用
可能须要从类实例中获取类的Mixin的引用。这可通过所属类的实例的mixins属性，再通过Mixin的id来引用（比如：this.mixins.util）。建议的做法是在定义Mixin类的时候总是为Mixin类设置一个唯一的Mixinid。
有下面三种方式来设置或确定Mixin类的id：
-
假设不是继承于基类Ext.Mixin。能够在Mixin类的类主体内设置mixinid配置项，比如：
mixinId: 'util'
假设Mixin类继承自Ext.Mixin，能够在mixinConfig配置项内设置id：
mixinConfig: { id: 'util' }
-
mixins配置项也能够被定义成一个对象。而且每个Mixin类都有一个键(id)，比如：
mixins: { util: 'My.utility.MixinClass' } -
假设没有使用以上方法来设置id，也能够使用Mixin类的完整类名：
Ext.define('My.utility.MixinClass'); var utilMixin = owningClass.mixins['My.utility.MixinClass'];
何时使用插件或Mixin
如今。已经了解了插件和Mixin。那么。在定义类的时候，何时使用插件，何时使用Mixin呢？由于同样的功能可能两者都能够实现。这时候就要考虑怎样在应用程序内使用这些功能。
插件更具灵活性。由于它能够在实例上使用，且仅仅对该实例加入开销。然而，假设功能是针对全部类的，那么在Mixin内定义逻辑就更有效率，由于插件实例不会在每个实例被创建的时候被创建。