Is it possible to display the contents of a div in extjs panel?

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.

Answer 2

NT3RP is correct, contentEl is what you need. Here is a code snippet:

Ext.create('Ext.container.Viewport', {
            layout : {
                type : 'border'
            },
            items : [ {
                region : 'north',
                contentEl : 'header',   //content read from html div#header
                id : 'mainHeader'
            },

By the way default xtype for any reagion in the viewport is a Panel - so you don't have to create a new Panel.

Answer 3

Another option would be to use the html property of Ext.panel.Panel.

This has some slight differences to contentEl which are described in the API, but performs a similar task.