Extjs 4 MVC TabPanel - 잘못된 렌더링 탭

Question

제발 도와주세요. 나는 MVP를 사용하여 TabPanel을 만들고있다. 렌더링 패널 추가시 탭. 다음은 두 개의 뷰와 컨트롤러의 코드입니다. 결과는 왜곡 된 그림입니다. 탭의 제목이 두 번 그려집니다 : 위쪽과 아래쪽 (전체 화면으로 펼쳐짐). I)은 (제어기 기능 addNewTab의 선 변경할 때, 다른 "tp.add ({제목 "tp.add ({위해 xtype 'mytab를'}) 표시()합니다.」, 「 새 탭 ', html :'MVC 새 탭 예제 '}). show(); "이면 모든 것이 올바르게 렌더링됩니다. 나는 도움에 감사 할 것이다.

는

Views: 
Ext.define('MY.view.Tab', { 
    extend: 'Ext.tab.Tab', 
    alias: 'widget.mytab', 
    initComponent: function() { 
     this.title = 'new Tab'; 
     this.html = 'MVC New Tab Example'; 
     this.callParent(arguments); 
    } 
}); 

Ext.define('MY.view.TabPanel', { 
    extend: 'Ext.tab.Panel', 
    alias: 'widget.mytabpanel', 
    initComponent: function() { 
     this.id = 'MYTabPanel'; 
     this.callParent(arguments); 
    } 
}); 


Controller: 
Ext.define('MY.controller.TabPanel', { 
    extend: 'Ext.app.Controller', 
    requires: ['MY.view.Tab'], 
    init: function() { 
     this.control({ 
      '#MYTabPanel': { 
       render: this.addNewTab 
      } 
     }); 
    }, 
    addNewTab: function(tp) { 
     tp.add({xtype: 'mytab'}).show(); //it work bad 
     //tp.add({title: 'new Tab', html: 'MVC New Tab Example'}).show(); //it work good 
    } 
}); 

Answer 1

귀하의 mytab 클래스는 Ext.tab.Tab를 확장합니다. 즉,이 코드 tp.add({xtype: 'mytab'}); 은 TabPanel의 기본보기로 Tab을 추가합니다. 탭은 탭 패널에 추가하는 모든 패널 또는 컨테이너에 대해 자동으로 만들어지며보기 상단에있는 단추 모양의 구성 요소로만 구성됩니다. 위의 코드를 호출하면 Tab 만들고 도면으로서 TabPanel으로 가압되는 것을 의미

는 다음 TabPanel 동일한 타이틀을 이용하여 서로 다른 Tab를 만들고 Tab 방금 ​​추가의 상단에 첨부 .

이 코드를 tp.add({title: 'new Tab', html: 'MVC New Tab Example'})' 작품은 실제로 panel (내선에서 사용하는 기본 xtype는 패널)를 추가하고 TabPanel 당신이 제공 한 제목을 사용하여 당신의 탭을 생성되기 때문이다.

대신 MY.view.Tab 연장 Panel을 수정하십시오. 특정보기의 탭만 사용자 정의하려는 경우 Ext.tab.Panel의 소스를 파고 TabPanel 항목에 추가 할 수있는 문서화되지 않은 tagConfig 속성을 확인하십시오.