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的時候根據定義的類屬性信息開始創建