Несколько экземпляров пользовательского компонента в Extjs 4.2

Question

У меня есть сетчатая панель под названием «Teilgewerke». Я могу использовать его в качестве элемента панели, как

{ 
    xtype:'panel', 
    layout: { 
     type: 'hbox', 
     align: 'stretch' 
    },    
    items:[ 
     { 
      //xtype: 'teilgewerkegrid', 
      id:'feinplanungPanelTeilgewerkeGrid', 
      flex: 2 
     }, 
     { 
      xtype: 'panel', 
      flex: 1 
     } 
    ] 

} 

Но теперь, когда я пытаюсь использовать его в другой панели, он бросает следующие ошибки:

Uncaught TypeError: Cannot read property 'isComponent' of undefined 

Я нашел этот question на Stackoverflow что указывает на ту же самую проблему. Я попробовал решение, указанное в ссылке выше, поставив предметы как

initComponent: function() { 
     this.items = [ 
      { 
       xtype:'panel', 
       flex: 5, 
       border: false, 
       padding: '0 20 0 20', 
       items:[ 
        { 
         xtype: 'text', 
         text: 'Teilgewerke für Aufbau an beteiligte Gruppen senden.', 
        } 
       ]    
      }, 


      Ext.create('PfalzkomApp.view.TeilgewerkeGrid', { 
       padding: '0 20 0 20', 
       id:'aufbauTabTeilgewerkeGrid', 
       flex: 90    
      }), 

      { 
       xtype: 'panel', 
       border: false, 
       padding: '0 20 0 20', 
       flex: 5    
      } 

     ] 
    this.callParent(); 
} 

Но у меня все еще такая же проблема. Может кто-нибудь указать на мою ошибку?

Answer 1

Решение этой проблемы, которое я нашел, это динамически вставить мой пользовательский компонент в массив элементов представления (в который я хотел добавить).

Таким образом, в после того, как рендер с моей точки зрения (в котором я хочу, чтобы добавить свой собственный компонент), я сделал это:

var view = Ext.getCmp('aufbauTab'); 

    view.insert(
     view.items.length, 
     { 
      xtype: 'teilgewerkegrid', 
      padding: '0 20 0 20', 
      id:'aufbauTabTeilgewerkeGrid', 
      flex: 90 
     } 
    ); 

И это работало прекрасно.

Answer 2

Вопрос, который у вас должен быть, заключается в том, что в Sencha ExtJS нет предопределенного xtype:'text'. Выберите один из textfield, label, container.

Пожалуйста, строго соблюдайте правильный отступ во всем коде, иначе он скоро будет нечитаемым. Кроме того, используйте наиболее читаемый подход для создания экземпляра компонента, как описано ниже:

Если вы хотите создать экземпляр пользовательского компонента, вы делаете его так, как будто вы создаете экземпляр компонента Sencha: using xtype.

В компоненте вы определяете, вы даете компонент в xtype имя:

Ext.define('My.custom.Component',{ 
    xtype:'teilgewerke' 

и при ее создании, вам потребуется компонент (так что файл будет загружен и xtype зарегистрирован с ComponentManager), а затем использовать этот очень xtype в вашем определении пунктов:

Ext.define('MyApp.view.Component',{ 
    extend:'Ext.panel.Panel', 
    requires:['My.custom.Component'], 
    initComponent: function() { 
     var me = this; 
     Ext.apply(me,{ 
      items:[{ 
       xtype:'teilgewerke' 
      }] 
     }); 
     me.callParent(arguments); 
    } 
}); 

Пожалуйста, обратите внимание, что все пользовательские компоненты, которые вы хотите создать экземпляр больше, чем когда-то никогда не должны содержать абсолютный id; только относительный itemId; и они не должны использовать абсолютные getCmp, только относительные down(), up(), nextSibling(), previousSibling().