`
roc08
  • 浏览: 224403 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Extjs4 Web Application Development Cookbook学习笔记三

阅读更多
原创翻译,欢迎纠错,转载请注明出处

3.在当前类中引入其他类的属性和方法

    Mixins是指将其他类得属性和方法引入到本类中,为我们提供了另外一种形式的继承。
通过mixins机制我们可以将功能单一的类进行组合使用,减少了重复代码,也不必去直接继承。
Mixins的一个例子是 Ext.form.Labelable类,他将label类引入Labelable类中。
下面以一个简单的例子说明mixin是如何使用的:
(1)创建一个类HasCamera,他有一个方法是takePhoto:

  Ext.define('HasCamera',{
      takePhoto : function(){
          alert("qiezi");
      }
    }
  );

(2)创建一个框架类,将HasCamera引入其中

   Ext.define('Cookbook.Smartphone',{
    minixs :{
       camera : 'HasCamera'
    },
    useCamera: function(){//这里即可使用HasCamera中的方法takePhoto
        this.takePhoto();
    }
   });


(3)使用实例
var smartphone = Ext.create('Cookbook.Smartphone');
smartphone.useCamera(); // alerts 'qiezi'


工作原理
通过使用minixs可以将多个class集成为一个功能齐全的class,(这里充分体现了组合优于继承的思想)。这意味着所有被引入的类的属性和方法通过此类得实例均可访问。(可以理解为引入后和本类得方法属性使用起来没有任何区别)

More
传统情况下我们继承了一个类后,类得某个方法可能需要重写,这里的重写机制与继承一样。但是有一点需要注意,在重写后调用被引入类的同名方法时需要通过访问原型中的方法调用。
例如我们扩展上例,加入聚焦方法,在拍照前首先要聚焦。

Ext.define('Cookbook.Smartphone', {
    mixins: {
        camera: 'HasCamera'
    },
    useCamera: function(){
        this.takePhoto();
    },
    takePhoto: function(){
        this.focus();
        //这里直接调用this.takePhoto会出现死循环,需通过访问原型中的方法调用
        this.mixins.camera.takePhoto.call(this);
    },
    focus: function(){
        alert('Focusing...');
    }
});

分享到:
评论

相关推荐

    Ext JS 4 Web Application Development Cookbook

    Ext JS 4 Web Application Development Cookbook by Andrew Duncan and Stuart Ashworth (Aug 24, 2012) $49.99 Paperback Order in the next 11 hours and get it by Tuesday, Mar 19. More Buying Choices - ...

    ExtJS4.Cookbook.2012

    ExtJS4.Web.Application.Development.Cookbook.2012

    Extjs4.0学习笔记

    ExtJS4学习笔记(三)---VBox的使 ExtJS4学习笔记(四)---Grid的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(六)---多表头Grid ExtJS4学习笔记(七)---带搜索的Grid(SearchGrid) ExtJS4学习笔记(八)---...

    ExtJS学习笔记.doc

    ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc

    extjs4.x学习笔记

    从开发大型的web后台或者企业管理系统来看,ExtJs3的缺陷还是比较明显的,从ExtJs4 开始引入了MVC架构,从而能够从容的组织系统的JS文件了。 从ExtJs5开始则引入了MVVC架构。 从网上资料来看,多数都是停留在ExtJs3...

    extJs 2.1学习笔记

    22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) 69 26. extJs 2.0学习笔记(Element.js篇) ...

    ExtJS4中文教程2 开发笔记 chm

    ExtJS4学习笔记(三)---VBox的使用 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(二)---HBox的使用 ExtJS4学习笔记(五)---Grid分页 ExtJS4学习笔记(八)---Grid多选 全选 ExtJS4学习笔记(六)--...

    extjs4 web应用程序开发指南源代码

    extjs4 web应用程序开发指南源代码,国内首本

    Extjs 5 学习笔记

    Extjs 5 学习笔记,在网上下载整理好的。

    Extjs3.0 cookbook

    一本非常好的extjs教程,Extjs 3.0 cookbook

    extjs4 学习笔记源码

    exjts4 学习笔记源码,源码包含windws,hbox,vbox和Grid的应用,其中grid介绍比较多。下载解压后,部署后就可以使用,所有代码均在demo文件夹下。更多extjs4教程,请关注http://www.mhzg.net

    ExtJs学习笔记,共30讲

    22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25. extJs 2.0学习笔记(Ext.Element API总结) 69 26. extJs 2.0学习笔记(Element.js篇) ...

    extjs3 Cookbook

    extjs3 cookbook 一本非常好的extjs教程

    ExtJS4 Web应用程序开发指南(第2版).zip

    ExtJS Web应用程序开发指南(第2版)对EXTJS4.0深入讲解,免责声明,只有前3章内容(extjs 4.0)

    extjs4.0学习笔记

    自己总结的extjs4学习笔记,自己总结的extjs4学习笔记,自己总结的extjs4学习笔记,

    EXTJS学习笔记,自己学习的过程,不多但是实用

    EXTJS 学习笔记 ROY EXTJS学习笔记,自己学习的过程,不多但是实用

    ExtJs4+Web参考项目

    ExtJs4+Web参考项目 EXTJS4 WEB开发 EXT EXTJS EXT4

    界面框架extjs学习笔记

    extjs学习笔记, 对应的书籍是extjs in action 没有看完...呵呵

Global site tag (gtag.js) - Google Analytics