EXT使用方法.docVIP

EXT使用方法 EXT使用方法汇总（5）——布局 所谓布局，简单来说就是决定把什么东西放到什么位置上，对于管理软件来说，一般都是首部放标题，左边放菜单栏，空余的右下方用来显示具体的内容。本章将详细介绍EXT中布局的用法。 一、传统的布局方式 我们可以用Ext.Viewport类对整个页面进行整体布局，具体使用方法如下： view plaincopy to clipboardprint? var viewport=new Ext.Viewport({ layout:border, items:[{ region:north, height:40, html:h1薛敬明专栏/h1 },{ region:west, width:100, html:p菜单一/pp菜单二/p },{ region:center, html:主要内容 }] }); var viewport=new Ext.Viewport({ layout:border, items:[{ region:north, height:40, html:h1薛敬明专栏/h1 },{ region:west, width:100, html:p菜单一/pp菜单二/p },{ region:center, html:主要内容 }] }); 效果图如图1所示： 图1 传统的布局形式 二、最常用的边框布局BorderLayout Ext.layout.BorderLayout布局把整个布局区域分成东、西、南、北、中5个部分，除了中间区域以外，其他的区域又都是可以省略的，因此我们可以利用它制作出更复杂、更灵活的布局。具体代码如下： view plaincopy to clipboardprint? var viewport2=new Ext.Viewport({ layout:border, items:[{ region:north,html:north },{ region:south,html:south },{ region:east,html:east },{ region:west,html:west },{ region:center,html:center }] }); var viewport2=new Ext.Viewport({ layout:border, items:[{ region:north,html:north },{ region:south,html:south },{ region:east,html:east },{ region:west,html:west },{ region:center,html:center }]