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才是必需的。

另外，您可以在这里看一看，因为它解释了很多：阶级制度。