extjs6-classic - ExtJS6 扩展组件

Question

如果我声明了一个自定义组件，当我创建组件的扩展时，如何正确地将更改应用到属性？例如：

Ext.define('GridForm',{
    extend: 'Ext.window.Window',
    initComponent: function(){  
        Ext.apply(this,{
            title: 'This a test window!'
            ,height: 400
            ,width: 400       
        });
        this.callParent();
    }    
});
Ext.define('LedDataForm',{
    extend: 'GridForm',
    initComponent: function(){
        Ext.apply(this,{
            title: 'OK, I want to change it to this.'
        });        
        this.callParent();
    }
});
Ext.application({
    name : 'MyApp',
    launch : function() {
        Ext.create('LedDataForm').show();
    }
});

在这个例子中，我只是想在创建“LedDataForm”时更改窗口的标题。感谢所有评论。

Answer 1

不要在 init 函数中编写任何您想要覆盖的配置，而是将其作为默认配置。

Ext.define('GridForm',{
    extend: 'Ext.window.Window',
    title: 'This a test window!',// Give this as configs rather than in init function
    initComponent: function(){  
        Ext.apply(this,{
            width:400,
            height:400
        });
        this.callParent();
    }    
});
Ext.define('LedDataForm',{
    extend: 'GridForm',
    title: 'OK, I want to change it to this.',
    initComponent: function(){
        Ext.apply(this,{
        });        
    this.callParent();
    }
});
Ext.application({
    name : 'MyApp',
    launch : function() {
        Ext.create('LedDataForm',{
            title:'testing'
        }).show();
    }
});

Answer 2

为什么不这样做：

Ext.define('GridForm',{
    extend: 'Ext.window.Window',
    title: 'This a test window!',
    height: 400,
    width: 400         
});
Ext.define('LedDataForm',{
    extend: 'GridForm',
    title: 'OK, I want to change it to this.'
});
Ext.application({
    name : 'MyApp',
    launch : function() {
        Ext.create('LedDataForm').show();
    }
});

可以将简单的静态配置应用于类主体（传递给的第二个参数Ext.define）。

initComponent通常只有在需要计算值或执行初始化逻辑时才需要。

另外，您可以看一下这里，因为它解释了很多：The Class System。