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

在这个例子中，我只想在创建＆＃34; LedDataForm＆＃34;时更改窗口的标题。所有评论都表示赞赏。

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。

ExtJS6扩展组件

2 个答案: