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