Ext JS 구성 요소를 서브 클래 싱하는 올바른 방법은 무엇입니까?

Question

구성 요소를 확장/하위 클래스로 만드는 올바른 방법은 무엇입니까?

Ext.define('Holidays.Components.UserInfo', { 
extend: 'Ext.panel.Panel', 
alias: 'widget.UserInfo', 
region: 'west', 
split: true, 
title: 'Categories', 
width: 300, 
collapsible: true, 
layout: 'border', 
animCollapse: false, 

initComponent: function() { 
    var me = this; 

    Ext.apply(me, { 
     items: [{ 
      xtype: 'panel', 
      region: 'center', 
      border: false 
     }, { 
      xtype: 'panel', 
      title: 'Tab 2', 
      region: 'south', 
      collapsible: true, 
      height: 200 
     }, ] 
    }); 
    me.callParent(arguments); 
} 
}); 

또는이 :

Ext.define('Holidays.Components.UserInfo', { 
extend: 'Ext.panel.Panel', 
alias: 'widget.UserInfo', 

initComponent: function() { 
    var me = this; 

    Ext.apply(me, { 
     width: 300, 
     collapsible: true, 
     layout: 'border', 
     animCollapse: false, 
     region: 'west', 
     split: true, 
     title: 'Categories', 
     items: [{ 
      xtype: 'panel', 
      region: 'center', 
      border: false 
     }, { 
      xtype: 'panel', 
      title: 'Tab 2', 
      region: 'south', 
      collapsible: true, 
      height: 200 
     }, ] 
    }); 
    me.callParent(arguments); 
} 
}); 

내가 colapsed 내가 이상한 레이아웃 동작을 얻을 때 애니메이션이이

this.userPanel = Ext.create("Holidays.Components.UserInfo"); 

내 패널처럼, 첫 번째 버전을 사용하여 내 클래스의 인스턴스를 생성 .

내가 정의 할 수있는 속성은 무엇이고 initComponent에 있어야합니까?

Answer 1

제목 질문에 대한 전체 설명은 here입니다. Molecular Man에게 남긴 의견을 읽고 제 의견에 포함 된 링크를 살펴보십시오.

첫 번째 버전에서 왜 이상한 동작을하는지 확신 할 수 없습니다. 아마도 첫 번째 버전을 사용할 때 어떤 일이 발생하는지 알려주지 만, InitComponent에 layout 및 animCollapse 구성을 가지고 있습니까? 또한이 구성 요소를 두 번 이상 만들 가능성이 있습니까?