extjs define研究
Posted 时光飞溅
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 : ‘权限管理‘, 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研究的主要内容,如果未能解决你的问题,请参考以下文章