`
darrenzhu
  • 浏览: 804140 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

关于Extjs的mixins和plugin

阅读更多
mixins 用于实现多继承,由于extend只能实现单继承,使用mixins就很方便的让我们从多个基类中继承方法,案例:
Ext.define('CanSing', {
     sing: function() {
         alert("I'm on the highway to hell...")
     }
});
Ext.define('CanFly', {
     fly: function() {
         alert("I'm flying in the sky...")
     }
});
Ext.define('CanRun', {
     run: function() {
         alert("I'm running...")
     }
});

Ext.define('Musician', {
     extend: ['CanSing']
});

Ext.define('Bird', {
     extend: ['CanSing'],
     mixins: ['CanFly','CanRun']
})


类Musician使用了extend:['CanSing'],这样类Musician就拥有了sing方法。但是如果你还希望类Musician还能继承其它父类的方法,这时就需要mixins,如上所示Bird类拥有了fly,sing,run方法。

plugin 用来给已有组件增加新功能或定制化的功能,这个跟继承是不同的概念,plugin是有单独生命周期的,而且这个生命周期是由包含它的组件来管理的。而mixins是没用单独生命周期概念的,因为继承的方法就是组件自己的方法。案例:
Ext.define("My.panel",{
	extend:'Ext.grid.Panel',
	plugins: [Ext.create('Ext.grid.plugin.CellEditing', {clicksToEdit: 1})]
});

这样grid就增加了一个单元格编辑的功能。

参考:
http://stackoverflow.com/questions/7298601/mixin-vs-plugin-what-to-choose
http://stackoverflow.com/questions/7298601/mixin-vs-plugin-what-to-choose
2
0
分享到:
评论
1 楼 java-admin 2016-02-23  
不错,加油,多写点文章

相关推荐

    ExtJS4中使用mixins实现多继承示例

    在ExtJS4中,开发人员有时需要为组件或者类实现多继承的功能,即一个类能够同时继承多个类的属性和方法。在这种情况下,`mixins`机制就显得尤为重要。本示例将详细介绍如何在ExtJS4中利用`mixins`实现多继承。 首先...

    VS Code 搭配 Sencha Plugin 插件简直不要太好用.用于开发 ExtJS/ExtAngular

    搭配Sencha Plugin插件,它可以为开发ExtJS和ExtAngular项目提供强大的支持。这篇文章将详细介绍如何使用VS Code和Sencha Plugin插件来提升你的前端开发效率。 首先,让我们了解一下ExtJS。ExtJS是一个用于构建富...

    eslint-plugin-extjs:使用ExtJS框架的项目的ESLint规则

    eslint-plugin-extjs 使用ExtJS框架的项目的ESLint规则。 这些规则的目标是与ExtJS 4.x一起使用。 欢迎请求与5.x兼容的请求! 规则明细 ext-array-foreach ExtJS提供的两个主要的数组迭代器函数和不同之处在于, ...

    extjs2----关于extjs 的使用,操作

    在标题"extjs2----关于extjs 的使用,操作"中,我们可以看出这是一份关于ExtJS 2.0版本的使用指南,主要涵盖了其基本操作和应用。描述中提到内容较为初级,适合初学者学习,这表明我们将探讨的是ExtJS的基础概念和...

    BMSys关于ExtJS4.0

    BMSys关于ExtJS4.0

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码,主要是因为 ExtJS4 配备了一类新的系统,不向后兼容...ExtJS3 升级到 ExtJS4 需要修改大量代码,需要我们重新学习和适应 ExtJS4 的新特性和变化。

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    基于ExtJS的工作流设计器,利用了ExtJS的强大组件模型和交互性,为用户提供了一个直观的方式来创建和编辑流程图。这样的设计器通常包括以下关键组成部分: 1. **组件库**:设计师需要一个包含各种工作流元素(如...

    Extjs相关插件

    4. 树形插件:`Ext.tree.plugin.TreeDragDrop`允许在树形结构中进行拖放操作,实现节点的移动和排序。 5. 动画插件:如`Ext.fx.Anim`,为组件添加动画效果,提升用户体验。 三、如何使用ExtJS 插件 1. 引入插件:在...

    EXTJS4自学手册

    EXTJS4自学手册——EXT基本方法、属性(mixins、statics、require) EXTJS4自学手册——EXT对象选择 二 Extjs 数据组件 EXTJS4自学手册——EXT数据结构组件(创建一个Model) EXTJS4自学手册——EXT数据结构组件...

    @@@extjs+struts2+json plugin的例子

    此外,为了实现`ExtJS`和`Struts2`的无缝对接,开发者可能还使用了一些特定的插件或库,比如`struts2-extjs-plugin`,它可能提供了便利的配置和组件,简化了两者之间的集成工作。 综上所述,`@@@extjs+struts2+json...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    在"ExtJs3.3中文API.CHM"中,开发者可以找到关于ExtJS 3.3的所有API和类的详细描述,以及相关的示例代码。 ExtJS 3.3的核心特性包括: 1. **组件化**:ExtJS基于组件模型,提供了一系列预定义的UI组件,如按钮、...

    ext的简单测试关于extjs上传等

    ext的简单测试关于extjs上传等。树、简单界面。显示图片等demo

    关于ExtJS3.3版本学习笔记

    【标题】"关于ExtJS3.3版本学习笔记"揭示了本文档主要关注的是ExtJS框架的一个特定历史版本,即3.3版。ExtJS是一个广泛使用的JavaScript库,专为构建富互联网应用程序(RIA)而设计。这个版本的学习笔记可能包含有关...

    轻松搞定Extjs 带目录

    本书作为Extjs的中文教程,旨在帮助读者快速上手Extjs,其内容涉及Extjs的基础知识和实际应用。 #### 2. JavaScript基础知识 - **类的定义**: Extjs中的类继承于JavaScript原生类,通过Ext.extend来定义。这是...

    extjs 3.4 开发前准备

    【EXTJS 3.4 开发前准备】 EXTJS 是一款强大的JavaScript库,主要用于构建桌面级的Web应用程序,提供丰富的用户界面组件和交互效果。3.4版本是EXTJS的一个...后续章节将分享更多关于EXTJS 4.1版本的体验和实例实现。

    ExtJS 7.6 SDK trial

    7.6版本是ExtJS的一个重要更新,带来了诸多新特性、性能优化以及对现代浏览器和设备的更好支持。 SDK(Software Development Kit)是ExtJS 7.6的核心组成部分,它包含了开发、调试和部署ExtJS应用所需的所有资源。...

    Extjs4.1 小例子(适合extjs初学者学习使用)

    对于初学者来说,理解并掌握ExtJS 4.1的基础和特性是非常有益的。 标题中的"Extjs4.1 小例子"意味着这个压缩包包含了一些基础的示例代码,旨在帮助初学者快速入门。通过这些小例子,你可以了解如何使用ExtJS 4.1来...

    Extjs 2.2 Extjs 3.21 js

    这两个版本在Web开发领域都有着广泛的运用,它们各自拥有不同的特性和改进,对于理解ExtJS的发展历程和选择适合项目需求的版本至关重要。 首先,我们来看ExtJS 2.2。这个版本是ExtJS早期的一个稳定版,发布于2008年...

    包含各种类型的extjs小图标,Extjs4小图标

    在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列图形图标,这些图标用于增强应用程序的视觉效果,提供用户友好的操作指示。 1. **图标分类**: - 图标通常分为不同的类别,如操作图标(比如...

Global site tag (gtag.js) - Google Analytics