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的时候根据定义的类属性信息开始创建

时间: 2024-10-14 05:19:37

extjs define研究的相关文章

使用Ext.define自定义类

ExtJS 允许用户使用Ext.define 自定义类.本文将通过实例介绍如何使用Ext.define自定义类,并介绍ExtJS 的动态加载(Require方法)的使用方法. Javascript自定义类 在Javascript中,自定义类是这样的: // 在Javascript中,自定义类 var Person = function(name, age) { this.Name = ""; this.Age = 0; this.say = function(msg) { alert(

ExtJS 中自定义类

首先我们来看一看在Javascript中,是怎样自定义类的: var Person = function (name, age) { this.Name = ""; this.Age = 0; this.Say = function (msg) { alert(this.Name + " Says : " + msg); } this.init = function (name, age) { this.Name = name; this.Age = age; }

ExtjS学习--------Ext.define定义类

Ext类Class的配置项:(注:Extjs的 的中文版帮助文档下载地址:http://download.csdn.net/detail/z1137730824/7748893 ExtJS配置文件和示例的下载地址:http://download.csdn.net/detail/z1137730824/7754771) 语法: define( String className, Object data, Function createdFn ) 实例: Ext.onReady(function()

ExtJS学习-------Ext.define的别名和备用名,两种定义静态方法的方法,混入属性和其他属性

(1)Ext.define起别名和备用名 Ext.onReady(function(){ Ext.define('User',{ config:{ name:'张三', age:23 }, //使用别名 alias:'alias_user', //使用备用名 alternateClassName:'alternateClassName_user', constructor:function(config){//构造器 var me=this; me.initConfig(config); } }

ExtJS学习------Ext.define的继承extend,用javascript实现类似Ext的继承

(1)Ext.define的继承extend 具体实例: Ext.onReady(function(){ //Sup Class 父类 Ext.define('Person',{ config:{ name:'bjsxt' } , constructor:function(config){ var me = this ; me.initConfig(config); } }); //Sub Class 子类 Ext.define('Boy',{ //使用Ext的继承 extend:'Person

ExtJs中动态加载机制研究(转)

觉得写的太好了,怕弄丢了,转一下:http://extjs.org.cn/node/659 昨天我们team对于extjs的动态加载机制做了些深入研究,这里先share下controller加载的结果. 以service registry portlet为例: 比如,在 liferay-portlet.xml中定义了: 所以我们的js的入口点是app.js,这其中创建了Ext.application并且声明了动态加载controller: view source print? 1.Ext.app

Extjs event domain 研究

Listeners and Event Domains In Ext JS 4.2, the MVC event dispatcher was generalized with the introduction of event domains. These event domains intercepted events as they were fired and dispatched them to controllers controlled by selector matching.

Extjs的form表单自动装载数据(通过Ext.data.Model的代理加载数据)

在做项目的时候遇到一个问题,以前双击grid页面一行数据的时候,会吧双击这一行的数据自动加载到双击的页面(Ext的弹出框),可以通过this.down(''form).getForm().loadRecord(record)来自动加载,可是现在有一个需求就是双击grid一行弹出一个新的浏览器页面(不是ext的弹出框,通过window.open()实现),只能把双击的id传到页面,再重新查数据手动赋值,如果一个页面字段很多,一个一个赋值是很辛苦的,所以就想能不能自动装载数据 通过长时间研究发现,t

Extjs 4.2使用心得 --- store和reader使用技巧

最近老大要求使用Extjs写前端,故研究了一番.这玩意功能比起jquery-ui等确实功能强大很多,效果也比较高大上,但是确实比较难使用.本人智商欠费各种坑都跳遍了才试出成果,现主要记录下store和reader的心得. 在介绍store之前先说下Model,Model代表应用程序管理的一些对象.例如,我们想在系统中建模一个现实世界,我们将为这世界中的一些物体像使用者.产品和汽车等对象定义一个Model,这些Model对象将被系统注册,被Store(仓库)使用,然后这些仓库又被 Ext中许多与数