Question

我的代码：

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/

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

谢谢，

Answer 1

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

在扩展时是否使用构造函数或initComponent   在你想做什么。 initComponent将从父级运行   无论如何构造函数，但后来，在一些内部变量之后   已经初始化，所以在某些情况下你有时会想要这样做   不

在任何情况下我都不会在Ext.define中使用renderTo，因为它会导致   实例化后立即呈现的组件，即   并不总是你想要的。此外，initConfig应该在parent之前   在构造函数中调用，否则它就像配置一样无用   已经在父母的电话中出现了。

您可能还想在我的签名中阅读“写一个大...”。这个   文档是为Ext的早期版本编写的，所以代码示例可以   不再适用，但原则是相同的。

Answer 2

根据我在ExtJS 4中发现的内容，以下是我扩展现有组件的方式（下面是在textfield上创建的示例组件）。

我使用构造函数方法，到目前为止还没有发现任何问题：

Ext.define('Ext.pnc.Textfield', {

extend: 'Ext.form.field.Text',

alias: 'widget.pnctextfield',

config:{
    focusCls:'focusClassFieldPnC',
    fieldCls:'baseClassFieldPnC'
},

constructor:function(cfg){
    this.callParent(arguments);
    this.initConfig(cfg);
    this.on('beforerender',this.beforeRender);
},

beforeRender:function(){
    if(!this.allowBlank){
        this.labelStyle = 'color:#ff0000';
    }
}
});

希望这证明是有帮助的。

ExtJS 4：执行继承的正确方法是什么

2 个答案: