CODEWITHSUNDEEP
javascriptfunctionextjsinitialization
user5507535
user5507535

Reputation: 1800

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

In ExtJS 6.2 classic we usually implement initComponent when we extend a component.

On ExtJS modern, there's no initComponent for Ext.Container, besides constructor which function would replace initComponent in Modern?

I'm having an issue because I implemented the component initialization in the constructor and when I display the component again it runs the constructor again with the config set as the previous updated config, so the component renders things multiple times where it should only render once.

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

Update

I found out the cause of the duplicating elements bug. It was caused by recreating the modal that the CalloutBox was in every time instead of just showing the one already open.

So we had this:

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

And now:

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

Upvotes: 1

Views: 994

Answers (1)

Peter Koltai
Peter Koltai

Reputation: 9734

Check out the initialize template method of Container and other classes in Modern Toolkit. Try running the following code in a 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()
});

Upvotes: 2

Related Questions