原文链接: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也是用来为类加入功能的类。

然而,它与插件的运作方式有下面的不同:

  1. Mixin能够将功能加入到不论什么类,而插件仅仅能用于Ext.Component类

  2. Mixin仅仅能在类的定义内声明mixins配置项,而插件则既能够在类定义内,也能够在类的实例中声明。

  3. Mixin或许是为了不论什么类设计的(请參阅Ext.mixin.Observable,它为不论什么混入了它的类增加了事件的触发/监听机制)。可是它能够更明白的混入特定的类(请參阅Ext.panel.Pinnable被设计为仅仅能混入Panel类)。

  4. 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:

  1. 假设不是继承于基类Ext.Mixin。能够在Mixin类的类主体内设置mixinid配置项,比如:

    mixinId: 'util'

    假设Mixin类继承自Ext.Mixin,能够在mixinConfig配置项内设置id:

    mixinConfig: {
    id: 'util'
    }
  2. mixins配置项也能够被定义成一个对象。而且每个Mixin类都有一个键(id),比如:

    mixins: {
    util: 'My.utility.MixinClass'
    }
  3. 假设没有使用以上方法来设置id,也能够使用Mixin类的完整类名:

    Ext.define('My.utility.MixinClass');
    var utilMixin = owningClass.mixins['My.utility.MixinClass'];

何时使用插件或Mixin

如今。已经了解了插件和Mixin。那么。在定义类的时候,何时使用插件,何时使用Mixin呢?由于同样的功能可能两者都能够实现。这时候就要考虑怎样在应用程序内使用这些功能。

插件更具灵活性。由于它能够在实例上使用,且仅仅对该实例加入开销。然而,假设功能是针对全部类的,那么在Mixin内定义逻辑就更有效率,由于插件实例不会在每个实例被创建的时候被创建。

[Sencha ExtJS & Touch] 在Sencha(Extjs/Touch)应用程序中使用plugins(插件)和mixins(混入)的更多相关文章

  1. 【翻译】为Ext JS和Sencha Touch开发人员准备的应用程序监测(App Inspector)

    和其他的Sencha开发人员一样,我会花费大约半天的时间在我喜欢的IDE工具上编写JavaScript,而另一半时间则是在浏览器上测试和调试我的应用程序.在过去几年,每一个主要的浏览器都已大为改善.现 ...

  2. [EXtJS5学习笔记]第一节 Sencha Cmd 学习笔记 简介 Sencha Cmd是什么

    本文地址: http://blog.csdn.net/sushengmiyan/article/details/38295575 本文作者:sushengmiyan ----------------- ...

  3. 【翻译】在Sencha应用程序中使用插件和混入

    原文:Using Plugins and Mixins in Your Sencha Apps 概述 当扩展一个框架类的功能的时候,通常都会直接将新功能写入派生类,然而,如果所需的同一功能存在于多个组 ...

  4. CCLayer在Touch事件(Standard Touch Delegate和Targeted Touch Delegate)

    在做练习,触摸故障,看到源代码,以了解下触摸事件. 练习操作:直CClayer子类init在 this->setTouchEnabled(true); 事件处理方法覆盖 virtual bool ...

  5. Touch事件在移动端web开发中的详解

    一.pc端事件回顾 HTML事件.DOM0事件.DOM2事件 事件对象. 如果上述概念不清楚,请先去了解. 二.移动端事件简介 2.1 pc端事件在移动端的问题 ​ 移动设备主要特点是不配备鼠标,键盘 ...

  6. Android Touch事件之一:Touch事件在父ViewGroup和子View之间的传递篇

    2015-11-26 17:00:22 前言:Android的Touch事件传递和View的实现紧密相连,因此理解Touch事件的传递,有助于我们更好的理解View的工作原理. 1. 几个重要的方法: ...

  7. ExtJS学习-----------Ext.Object,ExtJS对javascript中的Object的扩展

    关于ExtJS对javascript中的Object的扩展.能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 以 ...

  8. extjs实现简单的多文件上传(不借助任何插件),以及包含处理上传大文件的错误的各种处理办法

    在extjs的学习过程中,有遇到过有关多文件上传的问题,但是网上的大多数都是专门的去实现多文件上传而去做的组件之类的,没有特别简单的方式,于是小白便做了下面的内容,只是通过动态的去添加extjs的自带 ...

  9. ExtJS学习-----------Ext.String,ExtJS对javascript中的String的扩展

    关于ExtJS对javascript中的String的扩展,能够參考其帮助文档,文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 以 ...

随机推荐

  1. Comet反向ajax技术实现客服聊天系统

    说明:Comet反向Ajax是在看了燕十八老师的视频以后,结合他讲解的例子,自己用ajax+java实现了一遍.在这里把代码贴出来,以供大家学习.同时,ajax轮询技术也可以用在消息推送的功能中,下次 ...

  2. Python定制容器

    Python 中,像序列类型(如列表.元祖.字符串)或映射类型(如字典)都是属于容器类型,容器是可定制的.要想成功地实现容器的定制,我们需要先谈一谈协议.协议是什么呢?协议(Protocols)与其他 ...

  3. POJ 3083 BFS+DFS 40行

    题意:给你一个迷宫. 先输出当左转优先的时候走的路程长度,再输出当右转优先时走的路程长度,最后输出从起点到终点的最短路程长度. 嗯嗯 奴哥活跃气氛的题.随便写了写.. 此题 知道了思路以后就是水题了. ...

  4. HTML 简要概述

    注: 说实在的,这门语言的确不需要太多或太详细的篇幅来大书特书.掌握个大概,知道些特点及特性也就差不多了.人脑不是电脑,不需要死记硬背许多的属性和值,有一本帮助手册在手,胜过千言万语. 什么是 HTM ...

  5. MyEclipse中快速复制粘贴当前行的操作

  6. MYSQL日期时间字符串互转

    --MYSQL date_format(date,'%Y-%m-%d') -------------->oracle中的to_char(); 日期时间转字符串 --MYSQL str_to_da ...

  7. CSS清除浮动_清除float浮——详解overflow:hidden 与clear:both属性

    最近刚好碰到这个问题,看完这个就明白了.写的很好,所以转载了! CSS清除浮动_清除float浮动 CSS清除浮动方法集合 一.浮动产生原因   -   TOP 一般浮动是什么情况呢?一般是一个盒子里 ...

  8. Django学习案例一(blog):三. 模型生成数据

    1. 什么是模型models Django中以创建类的形式来创建数据表. 在编写代码的过程中,所有对数据库的操作,都是对类和类的对象进行操作. ORM对象关系映射(Object relation ma ...

  9. div 背景放图和直接放图区别

    <html> <head> <meta charset="UTF-8"> <title></title> <sty ...

  10. java如何设置文件的权限

    import java.io.File; 2.import java.io.IOException; 3./× 4.×只能给当前用户赋予对该文件的权限,调用createNewFile()方法默认的权限 ...