Question

I have some pre-existing js code that manipulates a div via DOM. I have a Ext.container.Viewport with a border layout. I want to display the contents of the div within a panel in the center region of the viewport.

HTML

<div id="contents"></div>

EXTJS

Ext.create('Ext.container.Viewport', {
  layout: 'border',
  items: [{
    region: 'north',
    ...
  }, {
    region: 'center',
    items: [{          
        // #contents;
    }]
  ]}
});

Answer 1

You may be interested in the contentEl configuration option. From the documentation:

Specify an existing HTML element, or the id of an existing HTML element to use as the content for this component.

This config option is used to take an existing HTML element and place it in the layout element of a new component (it simply moves the specified DOM element after the Component is rendered to use as the content.

There are some additional notes in the documentation, but it sounds like exactly what you’re looking for.