介绍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了,下一章还有更精彩的介绍~~
分享到:
相关推荐
Border布局由类Ext.layout.BorderLayout定义,布局名称为border。
7)Border区域布局 8)ExtJS的组件 9)Column列布局 10)组件的使用 11)Fit布局 12)Form布局 13)组件的配置属性 14)Accordion布局 15)事件处理 16)Card布局 17)Pable布局及其它布局 18)工具栏Toolbar 19)选项面板...
本节介绍 Ext的Border布局以及如何创建一个Viewport。 1、Viewport介绍: Viewport 是一类特殊的容器。它创建后会自动填充到整个页面区域,并能自动适应页面缩放。一般作为用用程序全局容器使用。 2、Border布局...
……………………………………………………………………………………………………26 5.2 Border区域布局……….…………………………………………………………………………………………….27 5.3 Column列布局...
外一篇 用javascript改变onclick调用的函数 用JavaScript加密保护...Border区域布局 《ExtJS2.0实用简明教程》之Ext类库简介 《ExtJS2.0实用简明教程》之布局概述 《ExtJS2.0实用简明教程》之获得ExtJS...
该布局把容器分成东南西北中五个区域,分别由east,south, west,north, cente来表示,在往容器中添加子元素的时候,我们只需要指定这些子元素所在的位置,Border布局会自动把子元素放到布局指定的位置。 二、应用...
使用CSS布局可以使网页变得更简洁、方便和美观,但也需要掌握一些CSS样式和属性,如width、height、background-color、border等。 一栏布局 一栏布局是指将网页中所有内容都以一栏方式显示的一种布局方式。在这种...
基于CSS Div的盒模型网页精确布局方法可以实现网页的精确布局,通过使用CSS盒模型的相关属性,可以确定内容区域的总尺寸和网页元素的总尺寸,从而实现网页的精确布局。该方法具有重要的应用价值,对于网页开发和网页...
15.3 Ajax实例:能够自由拖动布局区域的网页 第4部分 综合案例篇 第16章 我的博客 16.1 分析构架 16.1.1 设计分析 16.1.2 排版构架 16.2 模块拆分 16.2.1 导航与Banner 16.2.2 左侧列表 ...
CSS盒子模型是一个基本的布局模型,它由内容区域、边框区域、内边距区域和外边距区域组成。在这个模型中,每个标签都是一个盒子,通过盒子的视角可以更方便地进行布局。 一、CSS三大特性 CSS有三个基本特性:继承...
盒子模型由内容区域、内边距、边框和外边距四个部分组成。盒子模型的基本属性包括border、padding和margin三个部分。 1. 盒子模型的结构 盒子模型可以用一个三维立体图来表示,包括边框、内容内边距、背景图和背景...
在盒子模型中,content 是盒子的主要内容,border 是盒子的边框,padding 是盒子边框和内容之间的空白区域,margin 是页面上元素和元素之间的空白区域。盒子的实际空间是 “内容 + 内边距 + 外边距 + 边框” 组成的...
一款强大脚本类库 jQuery EasyUI---LayOut页面布局,可以将整个页面划分成几个区域。类似ExtJS中的Border布局。
BFC(块级格式化上下文)是一个自立的渲染区域,它规定了内部的块级盒子如何布局,并且与外部毫不相干。BFC可以理解为一个大的盒子,其内部由块级盒子组成的。 BFC的布局规则可以解决很多布局问题,例如解决浮动...
CSS盒子模型是CSS布局页面元素所使用的一种思维模型。在盒子模型中,所有页面中的元素被看做是一个个盒子,它们占据一定的页面空间,在其中放着特定的内容。盒子模型由content(内容)、border(边框)、padding(内...
它由四个部分组成:margin(外边距)、border(边框)、padding(内边距)和 content area(内容区域)。理解盒子模型对于写出正确的 CSS 代码非常重要。 1.2 CSS 实现垂直水平居中 垂直水平居中是指将 HTML 元素...
css部分 盒子模型 margin+border+padding+content Content边界/内边界: content边界环绕在由该元素的宽和高决定的一个矩形上,这个尺寸通常由该元素渲染后的内容...Border边界:border边界环绕在该元素的border区域的四周
Margin Box 是最外面的区域,是盒子和其他元素之间的空白区域,大小通过 margin 相关属性设置。 标准盒模型中,如果设置了 width 和 height,实际设置的是 Content Box 的大小,padding 和 border 再加上设置的宽高...