Блог

Главная - Вопросы по программированию - ExtJS Modern — Какую функцию инициализации реализовать при расширении компонента

ExtJS Modern — Какую функцию инициализации реализовать при расширении компонента

#javascript #function #extjs #initialization

Вопрос:

В ExtJS 6.2 classic мы обычно реализуем initComponent , когда расширяем компонент.

На ExtJS modern нет initComponent for Ext.Container , кроме constructor того , какую функцию можно было бы заменить initComponent в Modern?

У меня возникла проблема , потому что я реализовал инициализацию компонента в конструкторе, и когда я снова отображаю компонент, он снова запускает конструктор с 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();

Комментарии:

1. Вы хотите использовать метод инициализации в современной среде. Пожалуйста, поделитесь скрипкой с вашим кодом, похоже, вы добавляете элементы в класс вместо экземпляра.

2. Привет @hwsw Я добавил несколько примеров кода.

3. Модалы обрабатываются ExtJS. Вам не следует справляться с этим самостоятельно. Попробуйте использовать маску загрузки без msg и значка.

Ответ №1:

Ознакомьтесь с initialize шаблонным методом Container и другими классами в современном инструментарии. Попробуйте запустить следующий код в скрипке:

 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()
});
Метки: