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" 时更改 window 的标题。感谢所有评论。

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();
    }
});

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

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

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

ExtJS6 扩展组件

ExtJS6 Extending Components

extjs6-classic