How do I add a DOM node to a Panel in ExtJS

Question

I need to embedd legacy javascript code in an ExtJS application. Our application will use ExtJS dialogs to display old javasccript forms (before we eventually get round to redoing them in ExtJS).

I am trying to add a DOM node to an Ext.Panel (or Ext.window.Window for that matter). Not sure if its possible or what methods there are. I need some kind of appendChild method like below :

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

mainPanel.appendChild(getVeryComplicatedLegacyHTML())


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

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

Is this at all possible in ExtJS?

Answer 1

Is this at all possible in ExtJS?

there is no magic here... under ext cover the plain old html and css

Ext.panel.Panel (any ext components and its descendants) doesn't have appendChild method. Has the Ext.dom.Element wrapper of the DOMElement appendChild method and any component has its element reference via el/getEl().

Simple example, creates an auxiliary component with your legacy html inside a panel. When panel is rendered then the legacy html is injected inside the component, using update() method (which uses the this.el.update() element method inside) :

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