如何在视口中渲染网格（Ext.js）

Question

在视口中渲染面板（网格）的正确方法是什么？ 为什么在初始示例运行良好的情况下错误地呈现视口：http://examples.extjs.eu/?ex=simplevp

我的代码（http://k-m.ru/extjs/viewport/）

Ext.onReady(function() { 

Ext.QuickTips.init();

var viewport = new Ext.Viewport({
     id:'simplevp'
     //    ,renderTo: Ext.getBody(),
    // renderTo: Ext.getBody(),
    ,layout:'border'
    ,border:false
    ,items:[{
         region:'north'
        ,height:100
        ,border:false
        ,bodyStyle:'background-color:#f8f8f8;'
        ,title:'North'
        ,collapsible:true
        ,contentEl:'adsense-north'
    },{
         region:'west'
        ,width:200
        ,border:false
        ,autoScroll:true
        ,title:'West'
        ,bodyStyle:'padding:5px;font-size:11px;background-color:#f4f4f4;'
        ,html:' <h2>Hello from the West</h2>' 
        ,collapsible:true
        ,split:true
        ,collapseMode:'mini'

    },{
         region:'south'
        ,height:100
        ,html:'South'
        ,border:false
        ,title:'South'
        ,collapsible:true
    },{
         region:'east'
        ,width:200
        ,html:'East'
        ,border:false
        ,bodyStyle:'background-color:#f4f4f4;'
        ,title:'East'
        ,collapsible:true
    },{
         region:'center'
        ,html:'Center'
        ,border:false
        ,bodyStyle:'background-color:#f0f0f0;'
        ,title:'Center'
    /*  ,  items: [ 
                  {   xtype: 'Ext.grid.Panel', 
                      title: 'Заголовок панели 1', 
                      html:'Текст 1 текст 1 текст 1' 
                  }, 
                  {   xtype: 'panel', 
                      title: 'Заголовок панели 2', 
                      html:'Текст 1 текст  1 текст 1' 
                }]*/        
       }],


     }); // end of viewport
}); // eo function onReady