Study on ExtJS define

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:' Rights Management ', layout:' Border ', items: [{region:' West ', Xtype:' Grid ', Width:200, Title:' Role list ', reference:' Grid ', Split:true, bind: {store:' {Rolestore} '}, Selmodel: {seltype:' Rowmodel '}, Columns: [{text:' ID ', Dataindex:' ID ', Hidden:true}, {text:' Role name ', Dataindex:' Name ', Flex:1}], listeners: {//activate: ' Onroleactivate ',ItemClick: ' Onroleclick '}}, {region:' Center ', Xtype:' Treepanel ', Title:' Permissions list ', rootvisible:false, reference:' Tree ', bind: {store:' {Treestore} '}, Bbar: {items: [{text:Save, Iconcls:' Disk ', Handler:' Onpermissionsave '            }]        }    } ]});

Ext.define is actually called

Ext.classmanager's Define

Definefunction(className, data, CREATEDFN) {//<debug>Ext.classsystemmonitor && ext.classsystemmonitor (className, ' classmanager#define ', arguments); //</debug>                        if(data.override) {Manager.classstate[classname]= 20; returnManager.createOverride.apply (Manager, arguments); } Manager.classstate[classname]= 10; returnManager.create.apply (Manager, arguments); },

The Create is also called:

/** * 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&&typeofClassName!== ' string ') {                Throw NewError ("[Ext.define] Invalid class name '" + className + "' specified, must be a non-empty string"); }            //</debug>            varctor =Makector (className); if(typeofdata = = ' 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 NewClass (ctor, data,function() {                varPostprocessorstack = Data.postprocessors | |manager.defaultpostprocessors, Registeredpostprocessors=manager.postprocessors, Postprocessors=[], postprocessor, I, Ln, J, Subln, Postprocessorproperties, Postprocessorproperty; Deletedata.postprocessors;  for(i = 0,ln = postprocessorstack.length; i < ln; i++) {postprocessor=Postprocessorstack[i]; if(typeofPostprocessor = = = ' 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.f                                    n);  Break; }                            }                        }                    }                    Else{Postprocessors.push (postprocessor); }} data.postprocessors=postprocessors; DATA.CREATEDFN=CREATEDFN; Manager.processcreate (ClassName, This, data);        }); },

Returns a new Class

/** * @method constructor * Create a new anonymous class. * * @param {Object} Data A object represent the properties of this class * @param {Function} oncreated Optional,     The callback function to being executed when this class is fully created.     * Note that the creation process can is asynchronous depending on the pre-processors used. * * @return {ext.base} The newly created class*/Ext.class= Extclass =function(Class, data, oncreated) {if(typeofClass! = ' function ') {oncreated=data; Data=Class; Class=NULL; }        if(!data) {Data= {}; } Class=extclass.create (Class, data);        Extclass.process (Class, data, oncreated); returnClass; };

Called Extclass.create returns the class

/** * @private*/Create:function(Class, data) {vari =Basestaticmembers.length, name; if(!Class) {Class=Makector (//<debug>data. $className//</debug>                ); }             while(i--) {Name=Basestaticmembers[i]; Class[name]=Base[name]; }            returnClass; },

Called by the Makector

//creates a constructor that have nothing extra in its scope chain.    functionMakector (className) {functionConstructor () {//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>        returnconstructor; }

Well, I don't understand, it seems to have built an ordinary object, the class Name property

It appears that Ext.define is registering the class's descriptive attribute information in the ExtJS class system, and so on Ext.create, when the class property information is defined, start creating

Study on ExtJS define