Ext.define细节分析

自己写的其实还是不懂，
再看看别人写的吧
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的时候根据定义的类属性信息开始创建