Border区域布局

Ext教程

Ext控件使用

Border区域布局

Border区域布局

2008-04-10

介绍border布局的使用方法，通常用于布局页面总体框架，作为系统总提界面的首选，可嵌套多种布局，具体请参见实例分析部分。在介绍border布局之前，还是让我先简单介绍下ext的布局概念，先来看下面这张图：

什么？你不认识这些英文，别告诉我你上过英语课啊。在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下不会报错
}

怎么样？不错吧，是不是已经爱上ext了，下一章还有更精彩的介绍~~

最近更新 ( 2008-04-10 )

< 上一篇		下一篇 >


	Copyright Infotmation overhere. \| designed by Magicbox from Mambochina 曼波整站系统基于 Mambo 开发，是免费的自由软件，遵循 GNU/GPL 开源许可协议。曼波整站系统5.4.0 由 Mambo中国和 Mambo Resource 联合增强开发。闽ICP备08005204号