Dynamic content in ExtJS Window

Question

TLDR I want to add some dynamic content into an Ext-JS window / popup.

---

Currently I have tried assigning this content to a div and pulling on the innerhtml of that div like:

                new Ext.Window({
                height: 50,
                width: 160,
                x: 0,
                y: 30,
                layout: "fit",
                html: document.getElementById('output').innerHTML;
            }).show();

Am using jquery & getjson to get the dynamic data.

But that does nothing at all.
Has anyone done something similar before?

Can I give the html of the window an id and use it like an element?

Answer 1

You can register the content of a div into the window or any other panel etc using the contentEl method.

contentEl: 'ElementID'

Example:

                new Ext.Window({
                    title: 'Measurement',
                    height: 50,
                    width: 160,
                    resizable: false,
                    closeAction: "hide",
                    x: 0,
                    y: 30,
                    layout: "fit",
                    contentEl: 'output'
                }).show();

Answer 2

The original code should have worked fine. "Breaks completely" isn't really very useful for describing the problem.

However if you're trying to load complicated markup into a window, using the contentEl approach is probably better.

Note that the layout: 'fit' in the window is redundant, because you have no child items.