ExtJS 4：执行继承的正确方法是什么 [英] ExtJS 4: What is the Proper Way to Perform Inheritance

问题描述

我的代码：

Ext.onReady(function() { // Every property is declared inside the class
Ext.define('MyCustomPanel1', {
    extend: 'Ext.panel.Panel',
    alias: 'mycustompanel1',
    title: 'I am a custom Panel 1',
    html: 'This is the content of my custom panel 1',
    renderTo: Ext.getBody()
});    


Ext.define('MyCustomPanel2', { // HTML is declared inside the class, title inside the config, constructor overridden
    extend: 'Ext.panel.Panel',
    alias: 'mycustompanel2',
    renderTo: Ext.getBody(),        
    html: 'This is the content of my custom panel 2',        
    config: {
        title: 'I am a custom Panel 2'
    },
    constructor: function(config) {
        this.callParent(arguments);
        this.initConfig(config)
    }
});        


Ext.define('MyCustomPanel3', { // Title and HTML declared inside config, constructor overridden
    extend: 'Ext.panel.Panel',
    alias: 'mycustompanel3',
    renderTo: Ext.getBody(),        
    config: {
        title: 'I am a custom Panel 3',
        html: 'This is the content of my custom panel 3'
    },
    constructor: function(config) {
        this.callParent(arguments);
        this.initConfig(config)
    }
});

Ext.define('MyCustomPanel4', { // title and html inside of initComponent, title override in instance declaration doesn't hold. HTML property is empty on render
    extend: 'Ext.panel.Panel',
    alias: 'mycustompanel4',
    renderTo: Ext.getBody(),        
    initComponent: function(config) {
        Ext.apply(this, {
            title: 'I am a custom Panel 4',
            html: 'This is the content of my custom panel 4'                
        })
        this.callParent(arguments);
    }
});            
Ext.define('MyCustomPanel5', { // title declared inside config, html set inside of initComponent. Both initComponent and constructor are used.
    extend: 'Ext.panel.Panel',
    alias: 'mycustompanel5',
    renderTo: Ext.getBody(),        
    config: {
        title: 'I am a custom Panel 5'
    },
    constructor: function(config) {
        this.callParent(arguments);
        this.initConfig(config);
    },
    initComponent: function(config) {
        Ext.apply(this, {
            html: 'This is the content of my custom panel 5'                
        })
        this.callParent(arguments);
    }
});                
Ext.create('MyCustomPanel1', {
    title: 'I am custom Panel 1 - Instance!',
    html: 'This is the content of my custom panel 1 - Instance!'
})
Ext.create('MyCustomPanel2', {
    title: 'I am custom Panel 2 - Instance!',
    html: 'This is the content of my custom panel 2 - Instance!'
})
Ext.create('MyCustomPanel3', {
    title: 'I am custom Panel 3 - Instance!',
    html: 'This is the content of my custom panel 3 - Instance!'
})
Ext.create('MyCustomPanel4', {
    title: 'I am custom Panel 4 - Instance!',
    html: 'This is the content of my custom panel 4 - Instance!'
})
Ext.create('MyCustomPanel5', {
    title: 'I am custom Panel 5 - Instance!',
    html: 'This is the content of my custom panel 5 - Instance!'
})

}）

结果（来自JSFiddle.net）： http://jsfiddle.net/HtPtt/

Results (via JSFiddle.net): http://jsfiddle.net/HtPtt/

上述哪种方法是通过扩展现有方法来创建对象的正确方法目的？各有哪些优缺点？我在哪里可以找到有关ExtJS 4继承的更多信息（http://docs.sencha.com/ext-js/4-0/#/guide/class_system）？

Which of the above methods is the correct way to create an object by extending an existing object? What are the advantages and disadvantages of each? Where can I find further information on ExtJS 4 inheritance other than what is already here (http://docs.sencha.com/ext-js/4-0/#/guide/class_system)?

谢谢，

推荐答案

我在Sencha论坛上问了这个问题，这是我从Saki得到的答案：

I asked this question on the Sencha forum and here's the answer I got from Saki:

在扩展时使用构造函数还是initComponent取决于你想要做什么的
。无论如何，initComponent将从父
构造函数运行，但稍后，在一些内部变量已经初始化
后，所以在某些情况下你想要它，有时候
不是。

Whether you use constructor or initComponent while extending depends on what you want to do. initComponent will run from the parent constructor anyway, but later, after some internal variable have already been initialized, so in some cases you want that, sometimes not.

在任何情况下我都不会在Ext.define中使用renderTo，因为它会导致
组件在实例化后立即呈现，而且
并不总是你想要的。此外，initConfig应该在构造函数中的父
调用之前出现，否则它没用，因为在父调用中已经有
已经包含了。

In no case I would use renderTo in Ext.define because it causes the component to be rendered immediately after instantiation and that is not always what you want. Also, initConfig should come before parent call in constructors, otherwise it's useless as config has been already inited in the parent call.

你可以我也希望在我的签名中读到写一个大...。这个
文档是为以前版本的Ext编写的，所以代码示例不再适用
但原则是相同的。

You may also want to read "Writing a big..." in my signature. This document was written for a previous version of Ext so code examples do not apply anymore but principles are same.

这篇关于ExtJS 4：执行继承的正确方法是什么的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！