Extjs框架viewport总结之最简单的viewport案例图解(入门专用)

viewport简单的入门文档：
重要 属性解析:
region:在整个框架中的位置属性 north west center east south
collapsible:true 可不可以拉伸

效果图:

代码:

Ext.onReady(function(){
new Ext.Viewport({
enableTabScroll:true,    
layout:"border",
items:[{
title:"面板",
region:"north",  //设置位置
height:100,   
html:"<h1>上部</h1>"
},
{
title:"菜单",
region:"west",
width:200,
collapsible:true   //是不是可以折叠
},
{
xtype:"tabpanel",
region:"center",  //设置位置
items:[{title:"面板1"},{title:"面板2"}]
},
{
region:"east",   //设置位置
width:200,
title:"right",  
collapsible:true  //是不是可以折叠
},
{
region:"south",  //设置位置
height:100,
title:"bottom",
collapsible:true   //是不是可以折叠
}]
});
});