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

在视口中渲染面板（网格）的正确方法是什么？ 为什么在初始示例正常工作时视口渲染错误：

我的代码（）

Ext.onReady（函数（）{
Ext.QuickTips.init（）；
var viewport=新的外部视口({
id:'simplevp'
//，renderTo:Ext.getBody（），
//renderTo:Ext.getBody（），
，布局：'border'
，border:false
，项目：[{
地区：'北'
，身高：100
，border:false
，车身样式：'背景色：#F8；'
，标题：'North'
，可折叠：正确
，contentEl:“adsense-north”
},{
地区：'西部'
，宽：200
，border:false
，autoScroll:对
，标题：'West'
，车身样式：'padding:5px；字体大小：11px；背景色：#f4；'
，html:“你好，来自西方”
，可折叠：正确
，split:true
，collapseMode:“迷你”
},{
地区：'南'
，身高：100
，html:'South'
，border:false
，标题：“南方”
，可折叠：正确
},{
地区：'东部'
，宽：200
，html:'East'
，border:false
，车身样式：'background-color:#f4；'
，标题：'East'
，可折叠：正确
},{
地区：'中心'
，html:'Center'
，border:false
，车身样式：'background-color:#f0；'
，标题：'Center'
/*，项目：[
{xtype:'Ext.grid.Panel'，
标题：“1”，
html:“1][1][1][1][1][1”
}, 
{xtype:'面板'，
标题：“2”，
html:“1][1][1][1][1][1”
}]*/        
}],
})；//视口结束
}); // eo功能准备就绪

建议更新到新版本。2.3.0非常古老，不支持现代浏览器。功能也少了很多。@Evan Trimboli，没关系，我将用grid来做这件事，但是，为什么即使没有grid，它也不渲染视口？但是，这个链接指的是v.4.2.0，ext-base.js文件是v.2.3。我是否也应该更改ext-base.js？如果我没有弄错的话，这个文件（）引用的是数据库适配器，不是吗？不，与数据库完全无关。我建议您阅读入门指南。网格配置错误，网格容器的布局不存在。

contentEl

不存在。

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