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

Question

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

在 ExtJS modern 上，Ext.Container 没有 initComponent，除了 constructor 在 Modern 中哪个函数会取代 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

Check out Modern Toolkit 中 Container 和其他类的 initialize 模板方法。在 fiddle:

中尝试运行以下代码

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

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

ExtJS Modern - What initialization function to implement when extending a component

javascript

function

extjs

initialization