`
roc08
  • 浏览: 227971 次
  • 性别: 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 - ...

    ExtJS 4 Cookbook

    ### ExtJS 4 Web Application Development Cookbook #### 一、书籍简介与价值 《ExtJS 4 Web Application Development Cookbook》是一本全面介绍了ExtJS 4框架的实用指南。本书由Stuart Ashworth和Andrew Duncan...

    ExtJS4.Cookbook.2012

    ### ExtJS4 Web Application Development Cookbook (2012) #### 知识点概览 - **书籍概述**:本书提供了一系列实用的食谱,旨在帮助读者掌握Ext JS 4的各种功能,从基本特性到高级应用设计。 - **作者介绍**:本书...

    Extjs4.0学习笔记

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

    ExtJS学习笔记.doc

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

    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应用程序开发指南源代码,国内首本

    Extjs4 web项目

    myeclipse下开发的,数据库是mysql,带sql文件,改下密码就可运行。这是别人分享的毕业项目,需要的拿走。。。学习的好资料。

    extjs4学习文档

    EXTJS4 是一款强大的JavaScript框架,用于构建富客户端Web应用程序。EXTJS4的学习文档旨在帮助开发者掌握这一框架,尤其对于初学者来说,提供了宝贵的资源。文档中包含了从环境配置到实际应用开发的基础步骤。 首先...

    Extjs 5 学习笔记

    ### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...

    extjs4 学习笔记源码

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

    extJs3升级extjs4方案

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

    Extjs3.0 cookbook

    EXTJS 3.0 Cookbook 是一本专注于EXTJS框架的教程,旨在帮助开发者深入学习并掌握EXTJS 3.0版本的各项功能和最佳实践。EXTJS是一个强大的JavaScript库,用于构建富客户端Web应用程序,以其丰富的组件库、强大的数据...

    ExtJS 路由 application配置

    ExtJS 是一个强大的JavaScript应用程序框架,用于构建富客户端Web应用。路由(Routing)是现代Web应用中的关键概念,它允许用户通过URL与应用的不同部分进行交互。在ExtJS 6中,路由机制得到了改进,主要的配置和...

    extjs3 Cookbook

    extjs3 cookbook 一本非常好的extjs教程

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

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

    界面框架extjs学习笔记

    EXTJS in Action 是一本专为学习EXTJS编写的书籍,但这里我们主要关注学习笔记中的关键知识点。 首先,EXTJS的目录结构非常重要,因为它包含了所有必要的资源和源码: 1. `adapter`:这部分包含了适配器,用于将...

Global site tag (gtag.js) - Google Analytics