ExtJs Window doesn't render

Question

Please tell me why my window doesn't render. Below is the javascript that i am using

<link href="/Scripts/ext/resources/css/ext-all.css" rel="stylesheet" type="text/css"/>

    <script src="/Scripts/jquery/jquery-1.3.2.min.js" type="text/javascript"></script>
    <script src="/Scripts/ext/adapter/jquery/ext-jquery-adapter.js" type="text/javascript"></script>
    <script src="/Scripts/ext/ext-all.js" type="text/javascript"></script>




    <script type="text/javascript">
        $(function() {
            var viewport = new Ext.Viewport({
                items:[[
  {
    "minimizable": true,
    "maximizable": true,
    "title": "Hello World",
    "height": 300,
    "width": 400,
    "xtype": "window"
  }
]]
            });
        });
    </script>

Answer 1

Why would you create a window as an item of a viewport like that? You don't do that.

Do:

Ext.onReady(function() {

var win = new Ext.Window({
  minimizable: true,
  maximizable: true,
  title: "Hello World",
  height: 300,
  width: 400
});

win.show();

});

Answer 2

I don't have enough reputation to comment above, but Lloyd is 100% correct. Windows float above the layout (position:absolute) whereas component items are rendered -into- the layout as nested parent/child node structures. If you look at the markup for a rendered Window, it is created at the document body level -- there is no relationship between it and any layout panels.

It may be a confusion over naming -- as Lloyd said, a Panel is what you actually want (and is what gets created by default when you add an item to a viewport). Panels function much like windows, but they are built into the layout structure instead of floating above it. If you really want a window, then use Lloyd's code.