Ext window definition

Question

I am a newbie to extjs - and see a Ext 'window' definition as follows in extJs 3.4:

var cfWin = new Ext.Window({
    id:'idNYC', 
    el:'NYC',
    .........
    contentEl:'NYCData',
    title:'NYC Data',
    ........
    });

While I do understand what 'id' would do;why would we need the el and contentel for?
When we have a index.html that loads the above script,do we need a div of the same name(id/el) in the html?

Answer 1

From the official ExtJS documentation,

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

This means that if you have a div somewhere in your index.html, let say:

<div id="datalist">
    <ul>
        <li>Data 1</li>
        <li>Data 2</li>
    </ul>
</div>

And you specify datalist in contentEl, those html content will appear on your Window.

You can also specify the html directly:

contentEl: "<h1>This is my content</h1>".

You cannot specify the el as it is a read-only property.