ExtJS의 패널에 DOM 노드를 추가하는 방법

Question

ExtJS 애플리케이션에 레거시 자바 스크립트 코드를 임베드해야합니다. 우리의 응용 프로그램은 ExtJS 대화 상자를 사용하여 이전의 javasccript 양식을 표시합니다 (최종적으로 ExtJS에서 다시 처리하기 전에).

내가 Ext.Panel에 DOM 노드를 추가하는 것을 시도하고있다 (또는 그 문제에 대한 Ext.window.Window). 가능한지 또는 어떤 방법이 있는지 확실하지 않습니다. 나는 어떤 종류의 방법을 아래와 같이에 appendChild 필요

var mainPanel = document.create('div'); 

mainPanel.appendChild(getVeryComplicatedLegacyHTML()) 


var p = new Ext.Panel({ 
    title: 'another panel', 
    titleCollapse: true 
}); 

p.appendChild(mainPanel); //??? 

이는 ExtJS에 모든 수 있습니까?

Answer 1

ExtJS에서 가능한가요?

은 내선에서 appendChild 방법이없는 평범한 구식 HTML과 CSS

Ext.panel.Panel (모든 내선 구성 요소와 그 자손)를 커버 ... 여기에 마법이 없다. Ext.dom.Element DOMElement 래퍼가 appendChild method이고 모든 구성 요소의 요소 참조가 el/getEl()입니다.

간단한 예를 들어, 레거시 html로 패널에 보조 구성 요소를 만듭니다. 패널이어서 렌더링 될 때 는 레거시 HTML합니다 (this.el.update()element method inside 사용) update() 방법을 사용하여, 구성 요소의 내부에 주입된다

var p = new Ext.Panel({ 
    title: 'another panel', 
    titleCollapse: true, 
    items: [ 
    { 
     xtype: 'box', 
     itemId: 'fake-cmp' 
    }], 
    listeners: { 
     boxready: function(panel) { 
      var fakeCmp = panel.down('#fake-cmp'); 
      fakeCmp.update(getVeryComplicatedLegacyHTML()); 
     } 
    } 
});  

ExtJS