介绍border布局的使用方法,通常用于布局页面总体框架,作为系统总提界面的首选,可嵌套多种布局,具体请参见实例分析部分。 在介绍border布局之前,还是让我先简单介绍下ext的布局概念,先来看下面这张图:
![图片](http://www.extshow.com/sysdemo/output/5/layout.jpg)
什么?你不认识这些英文,别告诉我你上过英语课啊。在ext里,浏览器被分成东西南北中五个区域(别想到麻将啊-_-||),我们可以在这五个区域里对整个系统主界面进行布局,布局好的界面自动填充整个屏幕,当然,它是兼容多数浏览器的。(伟大的jack真实太厉害了~)。在实际运用中,当然不是必须要填充满这五个区域,我们可以根据自己的需要进行选择,例如看本站主界面:
我们可以发现,在这个应用中,我只没有用east区域,在我看来,这也是一种比较流行的布局方式:-)。了解了布局的概念后,先来看以下的代码来看看ext是怎么实现布局的,当然,这一节先主要介绍border布局。看以下代码:
- 代码:
Ext.onReady(function(){ //每一个ext的应用都必须放在Ext.onReady()里,表示当ext完全加载后执行定义的方法
new Ext.Viewport({ //实例化布局对象
layout:'border', //声明为border布局
items:[{ //布局项目
region:'north',//表示为north区域
height:50, //区域高度
title:'顶部面板' //区域标题
},{
region:'south',
height:50,
title:'底部面板'
},{
region:'center',
title:'中央面板'
},{
region:'west',
width:100,
title:'左边面板'
},{
region:'east',
width:100,
title:'右边面板'
}]
});
});
拷贝这些代码,直接保存运行后,将出现如下所示页面:
什么?你说上和下的布局用边框的太难看,我网站首页的上下布局是怎么弄的?将north和south的布局区域代码更改一下,最后整理成以下代码:
- 代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>extDemo</title>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({
region:'north',
el: 'north',//填充指定id的区域内容到north区域,若不设该属性,请通过html:'内容',设置区域内容
height:35
}),new Ext.BoxComponent({
region:'south',
el: 'south',
height:25
}),{
region:'center',
title:'中央面板'
},{
region:'west',
width:100,
title:'左边面板'
},{
region:'east',
width:100,
title:'右边面板'
}]
});
});
</script>
<div id="north">
顶部
</div>
<div id="south">
底部
</div>
</body>
</html>
Look一下^_^
强大吧,当然要做到灵活运用,你必须学会看ext的API文档,里面有详细说明。值得提醒的是,大家写这些代码的时候一定要记得良好缩进,结合ff 的firebug或ie调试,出错debug会方便很多,不然代码嵌套一多,想砸电脑的冲动都有了。另外一个细节就是,如果遇到ff下没问题,ie不能执行,很有可能是你item里的项目属性,在最后一个属性后加了逗号造成的。例如:
- 代码:
//正确写法
{
region:'center',
title:'中央面板'
}
//错误写法
{
region:'center',
title:'中央面板', //多余的逗号,ff下不会报错
}