Ext.define的原型替代品?

时间:2013-10-18 18:39:56

标签: javascript extjs extjs4.1

使用Ext.define定义自定义对象时,使用各种JS ide,它们都会丢失。当通过原型(函数定义,然后是原型函数等)定义简单的js对象时,它们都可以正常工作。有没有替代Ext.define重用和现有定义 - 装饰现有对象而不是定义它?我甚至不介意它是不是拾取基类的东西,我只关心我的定义 - 而且,我不需要动态加载所以我不担心加载顺序等。

为了记录,我看到有Ext.extend,但我不想探索它,因为它已被弃用。

以下示例:

function Uploader() {
}

Uploader.prototype.execute = function(url) {
    //do stuff here.
}

Ext.???(Uploader, {
    initComponent: function() {
        // handle ext specific stuff
    }
})

2 个答案:

答案 0 :(得分:1)

以下是通常定义和使用mixins的方法。

Ext.define('Plain', {
    message: 'Hello prototype',
    say: function () {
        console.log(this.message);
    },
    hello: function () {
        console.log('hello guy!');
    }
});

Ext.define('PlainPanel', {
    extend: 'Ext.panel.Panel',
    mixins: {
        plain: 'Plain'
    },
    message: 'Hello Ext'
});

Ext.onReady(function () {
    var p2 = Ext.create('PlainPanel');
    p2.say();  // Hello Ext
    p2.hello();  // hello guy!
    console.log(p2);
});

不是将mixins定义为数组,而是将其定义为一个对象,使得属性名称成为该mixin的内部引用,并且该值是mixin的类名。这允许您引用mixin的方法,即使装饰类具有自己的具有相同名称的方法。

答案 1 :(得分:0)

好的,在阅读了mixins后,我有一个有效的模式。

继续使用define扩展ext对象(例如面板),并使用mixins数组添加原型对象。定义的类必须具有与原型不同的名称,否则Ext不会将其创建为定义。

这是一个展示该技术的代码块:

Ext.onReady(function(){

    var Plain = function() {
    }

    Plain.prototype.message = "Hello prototype";

    Plain.prototype.say = function() {
        console.log(this.message);
    }

    Plain.prototype.hello = function() {
        console.log("hello guy!");
    }

    var p = new Plain();
    p.say();

    Ext.define("PlainPanel", {
        message: "Hello Ext",
        extend: 'Ext.panel.Panel',
        mixins: [Plain]
    });

    var p2 = new PlainPanel();
    p2.say();
    p2.hello();
    console.log(p2);
});