ExtJS Modern -扩展组件时实现什么初始化函数

Question

在ExtJS 6.2经典中，我们通常在扩展组件时实现initComponent。

在ExtJS现代，没有initComponent的Ext.Container，除了constructor哪个功能将取代initComponent在现代?

我遇到了一个问题，因为我在构造函数中实现了组件初始化，当我再次显示组件时，它再次运行构造函数，config设置为先前更新的config，因此组件多次渲染事物，它应该只渲染一次。

Ext.define('AppName.view.settings.CalloutBox', {
extend: 'Ext.Container',
xtype: 'calloutbox',
layout : {
type  : 'hbox',
},
constructor: function(config) {
// Added this to avoid the bug I commented above.
if (config.cls) {
this.callParent(arguments);
return;
}
config.cls = `myclass`;
// Here I programmatically add elements. These cause the bug
// because on next run of this constructor these will be
// added again.
config.items = [{
xtype : 'container',
cls   : `alert__icon-box`,
layout: {
type  : 'vbox',
pack  : 'center',
align : 'middle'
},
items: [{
xtype :'label',
cls   : `alert__icon`,
html  : `<i class="x-font-icon md-icon-alert"></i>`,
}]
}];
this.callParent(arguments);
}
});

---

更新

我找到了复制元素错误的原因。它是通过重新创建CalloutBox每次都在的模态而不是仅仅显示已经打开的模态而引起的。

所以我们有了这个:

Ext.Viewport.add({ xtype: 'mymodal' }).show();

现在:

const mymodal = Ext.getCmp('mymodal');
// If component already exists in DOM, just show it.
if (mymodal) {
mymodal.show();
return;
}
// Else we create and show it.
Ext.Viewport.add({ xtype: 'mymodal' }).show();

Answer 1

查看Modern Toolkit中Container等类的initialize模板方法。试着运行下面的代码:

Ext.define('MyContainer', {
extend: 'Ext.Container',
xtype: 'mycontainer',
initialize: function () {
this.add({
xtype: 'container',
layout: {
type: 'vbox',
pack: 'center',
align: 'middle'
},
items: [{
xtype: 'label',
html: 'label1',
},{
xtype: 'label',
html: 'label2',
}]});
}
});
Ext.create({
"xtype": "mycontainer",
renderTo: Ext.getBody()
});