extjs define研究

標籤：static   port   load   val   ror   efi   ext   emc   bre   

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 的define

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() {                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

 

/**     * @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的時候根據定義的類屬性資訊開始建立

extjs define研究