`

[EXTJS4] 类的定义与类的创建

阅读更多
1.
Ext.Base

function Base(){}

Base.prototype = {
    constructor : function(){
        return this;
    },

    callParent: function() {
        // 这个方法很OOP, 通过他可以调用到父类的重写方法.
        // 那它是如何实现的呢?
       
        // 得到子类(this)的原型方法callParent的调用者, 如在constructor调用       callParent,则返回constructor函数.
        var method = this.callParent.caller,
                parentClass, methodName;

        // 返回的constructor函数的所有者,在这是是子类(this),即构造函数.
        // $owner 这个在定义类的时候会初始化(implement).
        // 然后得到子类的父类
        parentClass = method.$owner.superclass;

            // 得到 constructor的名字, 定义类的时候会初始化(implement).
            methodName = method.$name;

        // 调用父类同名方法.
        return parentClass[methodName].apply(this, args || []);

    }
}

override 与 implement 的区别?
implement 用于添加类方法与属性
override 用于覆盖类的方法(fn),并保留覆盖方法到 fn.$previous.
callOverride 调用被覆盖的方法 fn.$previous.
callParent 调用父类被重写方法

关于 重载/覆盖/重写的区别:
在JS中其实只有覆盖这一说.因此根据行为我们认为单纯的覆盖就是覆盖,重写一般是继承关系的一种覆盖,而重载在JS中是不允许的.

borrow:简单的从其它类的原型复制方法到类的原型.

关于类与类的原型的区别:
类即是构造函数,通常绑定静态属性
而类的原型的属性可以继承,也是通常的 Java类.因此说类时理解可能模糊.

mixin: 这个译法通常叫织入, 与 borrow 的区别在于:
它织入的是整个类的原型.并保存织入类的原型到mixins, 类似多继承.

2
Ext.Class

Ext.Class = Class = function(newClass, classData, onClassCreated)

动态的创建一个类.

newClass : 构造函数
classData: 类属性与一些配置信息
onClassCreated: 类创建时的回调函数

内部实现如下:

2.1 复制 Ext.Base 的静态属性

2.2 预处理器:
    name: preprocessor.call(this, newClass, classData)
   
    默认配置:
         'extend'
         'statics'
         'inheritableStatics'
         'config'
         'mixins'

2.3 复制类属性: newClass.implement(classData);

2.4 onClassCreated
    这个方法在 ExtJS 中用于调用后处理器处理一些逻辑.

2.5 返回创建的类

预处理器详细原型剖析:
extend:

// 得到父类, 没有则为 Ext.Base
// 在使用时这里如果是字符串,会去ClassManager找到名字对应的类
data.extend

// 有了它就可以完成原型链
//如果父类不是 Ext.Base的子类, 需要修改注入Ext.Base原型属性到父类的原型.

// 类指针,永远指向自己.
clsPrototype.self = cls;

// 父类指针
cls.superclass = clsPrototype.superclass = parentPrototype;


复制父类的可继承静态属性, 不知道这个地方为什么就处理了??

复制父类原型的config.不知道这个地方为什么就处理了??



statics:

简单的添加 data.statics 到类.

inheritableStatics:

简单的添加 data.inheritableStatics 到类,并标识这些属性是可以继承的.

config:

简单的从 data.config 生成属性的get/set方法到类的原型的config属性.

mixins:

简单的织入类.


3.
ClassManager

className 处理器
xtype  处理器

alias 后处理器
data.alias

singleton 后处理器

alternateClassName 后处理器
data.alternateClassName

instantiate
3.1 根据名字查找类
cls: name -> 别名alias ->快捷名alternate ->远程同步加载 load

同步加载加载实现细节:

    Ajax.ajax({
		                url: url,
                                async: false,
		                success: function(response) {
		                     new Function(response.body + "\n//# sourceURL=" + url)();
		                }
		            });
 


3.2
new cls(arguments1, arguments2, ... , argumentsN);

4.
一个对象就这样子创建出来了.









分享到:
评论

相关推荐

    extJs3升级extjs4方案

    在 ExtJS3 中,我们可以使用 Ext.extend 来定义类,而在 ExtJS4 中,我们需要使用 Ext.define 来定义类。例如,在 ExtJS3 中,我们可以使用以下代码来定义一个类: ```javascript Ext.ux.PostStore = Ext.extend...

    extjs4学习文档

    创建一个名为helloworld.js的JavaScript文件,定义一个EXTJS应用,创建一个容器组件,并在其中放置一个具有标题和内容的Panel。同时,创建一个helloworld.html文件,引入EXTJS的CSS和JavaScript库以及自定义的hello...

    extjs4-教程

    - **创建helloword.js**:这个JavaScript文件将包含ExtJS应用的初始化代码,定义了一个名为HelloExt的应用,并在应用启动时创建了一个Viewport组件,里面包含了一个Panel。 - **创建helloword.html**:这是应用的...

    ExtJs4.rar

    Model用于定义数据结构和验证规则,Store则作为数据容器,负责加载、存储和管理数据,而Proxy则是与服务器端进行通信的接口。这种数据层的设计极大地简化了数据操作,使前后端交互更为流畅。 在图表和可视化方面,...

    ExtJS4多文件上传,带进度条及管理

    1. **创建uploadPanel**:在ExtJS4中定义一个面板,包含文件选择输入框、上传按钮和其他控件。 2. **集成swfupload**:引入swfupload库,配置相关参数,如文件类型、最大上传大小等。 3. **事件监听**:设置事件监听...

    extjs4 treeGrid实例

    在ExtJS4中,TreeGrid主要由`Ext.tree.Panel`类定义,它扩展了`Ext.grid.Panel`,因此具备了表格的所有功能,同时也包含了树结构的特性。 创建一个TreeGrid的第一步是定义模型(Model)。模型定义了数据的字段及其...

    Extjs4 grid使用例子

    ExtJS4是一个强大的JavaScript框架,主要用于构建富客户端的Web应用程序。在给定的"Extjs4 grid使用例子"中,我们可以深入理解如何在MVC架构下有效地利用ExtJS4的Grid组件。Grid组件是ExtJS中的核心部分,它提供了一...

    extjs4学习资源大全

    此外,HTML5的学习资料可能会结合ExtJS4,展示如何利用HTML5的新特性与ExtJS框架结合,以创建更现代的Web应用。 学习ExtJS4时,建议首先了解其MVC架构,这是整个框架的核心设计模式。然后,熟悉基本组件的使用,...

    EXTJS4 菜单栏

    4. **配置与布局**:EXTJS4提供了丰富的配置选项来定制菜单栏的外观和行为,如`width`、`floating`(是否浮动)、`plain`(无边框样式)等。同时,菜单栏支持自动调整大小和位置,以适应不同的屏幕尺寸和布局。 5. ...

    Extjs4 下拉树 TreeCombo

    ExtJS 4 下拉树(TreeCombo)是一种组合控件,它将传统的下拉框与树形结构结合在一起,提供了一种在有限空间内展示层级数据的高效方式。这种控件在很多场合都非常实用,例如在需要用户选择分类或者层级结构的场景中...

    extjs4环境搭建

    1. `\extjs-4.x\resources`:这个文件夹包含所有CSS样式文件和图片资源,它们用于定义组件的外观。 2. `\extjs-4.x\ext-all.js`:这是ExtJS的核心文件,包含了所有的组件、事件处理和其他核心功能。 3. `\extjs-4.x\...

    ExtJS4 doc文档

    `Column`类定义了列的属性和行为,而`SelectionModel`控制用户选择行的方式。通过组合使用这些组件,可以创建出功能强大的数据网格。 4. **树形视图(tree)** `TreePanel`用于展示层次化的数据。它支持拖放操作,...

    Extjs4 权威指南(中)

    #### 一、Extjs4简介与获取途径 - **概述**:Extjs4是一款基于JavaScript的企业级富客户端Web应用程序开发框架,旨在简化前端开发过程,提供丰富的UI组件和强大的数据处理能力。 - **获取途径**:访问官方网站`...

    Extjs4使用要点个人整理

    JSONStore是ExtJS用于处理JSON格式数据的存储类,它可以与Ajax请求配合使用,自动加载和解析数据。 7. **Ajax提交超时**:`Extjs ajax提交超时.txt`可能涉及Ajax请求的超时设置和处理。在ExtJS中,可以设置请求的...

    extjs4 ssh 项目源码

    这个项目展示了如何在后台使用SSH框架来处理业务逻辑和数据存储,而在前端使用ExtJS 4创建交互式的用户界面。 **ExtJS 4** ExtJS 4 是 Sencha 公司提供的一个用于构建Web应用的JavaScript库。它提供了大量的组件和...

    ExtJS4 MVC 混合实例

    在ExtJS4中,控制器通过Ext.app.Controller类创建,可以定义事件监听器和操作(Action),控制视图和模型的交互。 在提供的实例中,你可能会看到以下关键部分: - **app.js**:这是应用的主入口文件,通常包含了...

    extjs4 ComboBox 点击下拉框 出现grid效果

    在EXTJS4中,ComboBox是一个常用的组件,它用于创建下拉选择框,通常用于输入框的辅助选择。这个组件提供了一种用户友好的方式来从一组预定义的选项中进行选择。然而,根据你的标题和描述,你似乎遇到了一个特别的...

    extjs4mvc的crud

    在"extjs4mvc的crud"这个主题中,我们将深入探讨如何使用ExtJS 4的Model-View-Controller(MVC)架构来实现货物处理的创建(Create)、读取(Read)、更新(Update)和删除(Delete)操作。 首先,了解MVC模式是...

    EXTJS 4 树形表格组件使用示例

    2. **数据绑定**:EXTJS 4支持Store和Model的概念,可以方便地将树形表格与后端数据源进行双向绑定。你可以通过配置Store加载JSON、XML等格式的数据,或者使用远程数据源(如Ajax请求)动态加载数据。 3. **列配置*...

    extjs4MVC实现

    ExtJS4.0 MVC 实现详解 ...通过理解并熟练运用 MVC 架构模式,我们可以创建出具有高效数据管理、灵活用户交互和易于维护的 ExtJS 应用程序。学习和掌握这些知识,对于提升你的前端开发技能具有重要意义。

Global site tag (gtag.js) - Google Analytics