1. 程式人生 > >Extjs框架viewport總結之最簡單的viewport案例圖解(入門專用)

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   //是不是可以摺疊
}]
});
});