自己写的其实还是不懂,
再看看别人写的吧
Extjs4 源码分析系列一 类的创建过程
https://www.cnblogs.com/creazyguagua/p/4302864.html
http://www.cnblogs.com/creazyguagua/p/4667768.html ExtJs4 makeCtor初步理解!
http://blog.csdn.net/wjy397/article/details/47321255 extjs底层源码实现继承分析
http://www.cnblogs.com/ouzilin/p/5164302.html Ext.define('MyApp.view.system.permission.Permission', {
extend : 'Ext.panel.Panel',
xtype : 'sys-permission',
requires: [
'MyApp.ux.Util',
'MyApp.model.SysRole'
],
viewModel: {
stores: {
roleStore : ZUtil.createStore('SysRole', 'SysRole/read'),
treeStore: ZUtil.createTreeStore('SysMainMenu/getMenuTree', {autoLoad :false})
}
},
controller: {
type: 'sys-permission'
},
title : '权限管理',
layout : 'border',
items : [ {
region : 'west',
xtype : 'grid',
width : 200,
title : '角色列表',
reference: 'grid',
split: true,
bind : {
store : '{roleStore}'
},
selModel : {
selType : 'rowmodel'
},
columns : [ {
text : 'ID',
dataIndex : 'id',
hidden: true
}, {
text : '角色名称',
dataIndex : 'name',
flex: 1
} ],
listeners : {
//activate : 'onRoleActivate',
itemclick : 'onRoleClick'
}
}, {
region : 'center',
xtype : 'treepanel',
title : '权限列表',
rootVisible: false,
reference: 'tree',
bind : {
store : '{treeStore}'
},
bbar: {
items: [{
text: '保存',
iconCls: 'Disk',
handler: 'onPermissionSave'
}]
}
} ]
});

Ext.define实际是调用

Ext.ClassManager(ClassManager.js) 的define

注意Manager = Ext.apply(new Ext.Inventory(), {  所以Ext.ClassManager实际上 is an instance of Ext.Inventory,又加了些东西?

define: function (className, data, createdFn) {
//<debug>
Ext.classSystemMonitor && Ext.classSystemMonitor(className, 'ClassManager#define', arguments);
//</debug> if (data.override) {
Manager.classState[className] = 20;
return Manager.createOverride.apply(Manager, arguments);
} Manager.classState[className] = 10;
return Manager.create.apply(Manager, arguments);
},

又调用了create:

/**
* Defines a class.
* @deprecated Use {@link Ext#define} instead, as that also supports creating overrides.
* @private
*/
create: function(className, data, createdFn) {
//<debug>
if (className != null && typeof className !== 'string') {
throw new Error("[Ext.define] Invalid class name '" + className + "' specified, must be a non-empty string");
}
//</debug> var ctor = makeCtor(className);
if (typeof data === 'function') {
data = data(ctor);
} //<debug>
if (className) {
if (Manager.classes[className]) {
Ext.log.warn("[Ext.define] Duplicate class name '" + className + "' specified, must be a non-empty string");
}
ctor.name = className;
}
//</debug> data.$className = className; return new Class(ctor, data, function() {
          // 下面的createFn的处理估计是为了把类定义是的配置对象保存起来吧,
          // 因为define一个自定义的类,就是为了设置上个性化的配置,从而Ext.create的时候直接得到个性化的实例
var postprocessorStack = data.postprocessors || Manager.defaultPostprocessors,
registeredPostprocessors = Manager.postprocessors,
postprocessors = [],
postprocessor, i, ln, j, subLn, postprocessorProperties, postprocessorProperty; delete data.postprocessors; for (i = 0,ln = postprocessorStack.length; i < ln; i++) {
postprocessor = postprocessorStack[i]; if (typeof postprocessor === 'string') {
postprocessor = registeredPostprocessors[postprocessor];
postprocessorProperties = postprocessor.properties; if (postprocessorProperties === true) {
postprocessors.push(postprocessor.fn);
}
else if (postprocessorProperties) {
for (j = 0,subLn = postprocessorProperties.length; j < subLn; j++) {
postprocessorProperty = postprocessorProperties[j]; if (data.hasOwnProperty(postprocessorProperty)) {
postprocessors.push(postprocessor.fn);
break;
}
}
}
}
else {
postprocessors.push(postprocessor);
}
} data.postprocessors = postprocessors;
data.createdFn = createdFn;
Manager.processCreate(className, this, data);
});
},

返回一个new Class(Class.js)

/**
* @method constructor
* Create a new anonymous class.
*
* @param {Object} data An object represent the properties of this class
* @param {Function} onCreated Optional, the callback function to be executed when this class is fully created.
* Note that the creation process can be asynchronous depending on the pre-processors used.
*
* @return {Ext.Base} The newly created class
*/
Ext.Class = ExtClass = function(Class, data, onCreated) {
if (typeof Class != 'function') {
onCreated = data;
data = Class;
Class = null;
} if (!data) {
data = {};
} Class = ExtClass.create(Class, data); ExtClass.process(Class, data, onCreated); return Class;
};

调用的ExtClass.create返回class

/**
* @private
*/
create: function (Class, data) {
var i = baseStaticMembers.length,
name; if (!Class) {
Class = makeCtor(
//<debug>
data.$className
//</debug>
);
} while (i--) {
name = baseStaticMembers[i];
Class[name] = Base[name];
} return Class;
},

调用的makeCtor

// Creates a constructor that has nothing extra in its scope chain.
function makeCtor (className) {
function constructor () {
// Opera has some problems returning from a constructor when Dragonfly isn't running. The || null seems to
// be sufficient to stop it misbehaving. Known to be required against 10.53, 11.51 and 11.61.
return this.constructor.apply(this, arguments) || null;
}
//<debug>
if (className) {
constructor.name = className;
}
//</debug>
return constructor;
}

好,不太懂了,貌似就是建了一个普通的函数对象,将类名作为name属性,估计是为了基于构造函数创建该类的实例用

看来Ext.define就是将类的描述属性信息注册到extjs的类体系中,等Ext.create的时候根据定义的类属性信息开始创建

Ext.define细节分析的更多相关文章

  1. Ext.create细节分析

    var win1 = Ext.create('Ext.window.Window', { //实例化方法四 : 使用 完整的 Extjs 类名 width: 800, title: 'define t ...

  2. Extjs 学习总结-Ext.define自定义类

    本教程整理了extjs的一些基本概念及其使用,包括自定义类(Ext.define).数据模型.代理等.本节介绍使用Ext.define自定义类 使用Ext.define自定义类 1. 首先看看js中自 ...

  3. Extjs-4.2.1(二)——使用Ext.define自定义类

    鸣谢:http://www.cnblogs.com/youring2/archive/2013/08/22/3274135.html --------------------------------- ...

  4. rip路由协议 细节分析及实例配置【完整版】

    rip路由协议 细节分析及实例配置[完整版] RIP呢,这是一个比较重要的知识点,所以它的知识覆盖面很广泛:但是呢,我将会对碰到的问题进行一些分析解刨(主要是为了帮助自己理清思维):也希望能够从中发现 ...

  5. Ext.define(override)

    Ext.define(override)作用是:定义类的补丁(扩展或重写) 有3中使用方法,见附件 Ext.define(override).zip

  6. ExtJS 4.2 教程-03:使用Ext.define自定义类

    转载自起飞网,原文地址:http://www.qeefee.com/extjs-course-3-define-classes ExtJS 4.2 教程-01:Hello ExtJS ExtJS 4. ...

  7. ExtJS学习------Ext.define的继承extend,用javascript实现相似Ext的继承

    (1)Ext.define的继承extend 详细实例: Ext.onReady(function(){ //Sup Class 父类 Ext.define('Person',{ config:{ n ...

  8. ExtjS学习--------Ext.define定义类

    Ext类Class的配置项:(注:Extjs的 的中文版帮助文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 ExtJS配置文件和演 ...

  9. Ext学习之路——Ext.define

    Ext.define('My.awesome.Class', { someProperty: 'something', someMethod: function() { alert(s + this. ...

随机推荐

  1. js fetch api

    MDN fatch 返回的对象 type string url string redirected boolean status number ok boolean statusText string ...

  2. freemarker 中可以直接使用的内置对象

    freemarker 中可以直接使用的内置对象 需要配置一下:springboot中配置 ## Freemarker \u914D\u7F6E ## \u6587\u4EF6\u914D\u7F6E\ ...

  3. 如何把py文件打包成exe可执行文件

    如何把py文件打包成exe可执行文件 1.安装 pip install pyinstaller 或者 pip install -i https://pypi.douban.com/simple pyi ...

  4. Java的各种打包方式

    JAR (Java Archive file) 包含内容:class.properties文件,是文件封装的最小单元:包含Java类的普通库.资源(resources).辅助文件(auxiliary ...

  5. 如何从视频中分离出音乐,和对音乐做分割,合并的处理(瑞典音乐家-新八宝盒.mp3.rar下载)

    点击下载:瑞典音乐家-新八宝盒.mp3.rar 1.工具 Total Video Converter 3.71 视频处理(安装软件,有绿色版的) MP3剪切器 MP3剪切器(小工具) Mp3mateP ...

  6. POJ 1488 - TEX Quotes

    Description TEX is a typesetting language developed by Donald Knuth. It takes source text together w ...

  7. H. GSS and Simple Math Problem 高精度乘法模板

    链接:https://www.nowcoder.com/acm/contest/104/G来源:牛客网 题目描述 Given n positive integers , your task is to ...

  8. Docker容器与容器云之Docker单机集群部署案例

    准备工作: CentOS 7安装docker: #yum -y install docker 1.获取节点所需镜像 --主机执行 #docker pull django #docker pull ha ...

  9. Mean reversion (finance) 均值回归

    Mean reversion (finance)  均值回归

  10. [dpdk] service core

    dpdk 17.11 增加了一组新的API,serivce core 如命名,就是用一组core跑service函数. 我自己的测试程序如下: https://github.com/tony-caot ...