ExtJs Window не рендерится

Question

Пожалуйста, скажите мне, почему мое окно не отображается. Ниже приведен JavaScript, который я использую

<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

Зачем вам создавать окно как элемент окна просмотра? Ты этого не делаешь.

Делать:

Ext.onReady(function() {

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

win.show();

});

Answer 2

У меня недостаточно репутации, чтобы комментировать выше, но Ллойд на 100% прав. Окна плавают над макетом (позиция: абсолютная), тогда как элементы компонента отображаются в макете как структуры вложенных родительских / дочерних узлов. Если вы посмотрите на разметку для визуализированного окна, она создается на уровне тела документа - между ней и панелями макета нет никакой связи.

Это может привести к путанице с именами - как сказал Ллойд, Panel - это то, что вам нужно (и то, что создается по умолчанию при добавлении элемента в область просмотра). Панели работают так же, как окна, но они встроены в структуру макета, а не плавают над ним. Если вы действительно хотите окно, используйте код Ллойда.