ExtJS 2.0实用简明教程 之Border区域布局


Posted in Javascript onApril 29, 2009

该布局把容器分成东南西北中五个区域,分别由east,south, west,north, cente来表示,在往容器中添加子元素的时候,我们只需要指定这些子元素所在的位置,Border布局会自动把子元素放到布局指定的位置。看下面的代码:

Ext.onReady(function(){ 
new Ext.Viewport({ 
layout:"border", 
items:[{region:"north", 
height:50, 
title:"顶部面板"}, 
{region:"south", 
height:50, 
title:"底部面板"}, 
{region:"center", 
title:"中央面板"}, 
{region:"west", 
width:100, 
title:"左边面板"}, 
{region:"east", 
width:100, 
title:"右边面板"} 
] 
}); 
});

执行上面的代码将会在页面中输出包含上下左右中五个区域的面板,如下图所示:
ExtJS 2.0实用简明教程 之Border区域布局
Javascript 相关文章推荐
js自带函数备忘 数组
Dec 29 Javascript
JavaScript 原型与继承说明
Jun 09 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
Vue数据驱动模拟实现2
Jan 11 Javascript
Canvas 绘制粒子动画背景
Feb 15 Javascript
详解JavaScript中的六种错误类型
Sep 21 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
ie 调试javascript的工具
Apr 29 #Javascript
理解JavaScript的caller,callee,call,apply
Apr 28 #Javascript
JS 判断代码全收集
Apr 28 #Javascript
js checkbox(复选框) 使用集锦
Apr 28 #Javascript
js 数组操作代码集锦
Apr 28 #Javascript
ie和firefox不兼容的解决方法集合
Apr 28 #Javascript
js 表单验证方法(实用)
Apr 28 #Javascript
You might like
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
php中JSON的使用与转换
2015/01/14 PHP
PHP中文竖排转换实现方法
2015/10/23 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
JavaScript 替换Html标签实现代码
2009/10/14 Javascript
JavaScript Eval 函数使用
2010/03/23 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
2010/03/31 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
2014/03/12 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
JavaScript中property和attribute的区别详细介绍
2015/03/03 Javascript
JQuery中两个ul标签的li互相移动实现方法
2015/05/18 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
基于javascript实现按圆形排列DIV元素(二)
2016/12/02 Javascript
jquery实现折叠菜单效果【推荐】
2017/03/08 Javascript
vue移动端html5页面根据屏幕适配的四种解决方法
2018/10/19 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
layui下拉框获取下拉值(select)的例子
2019/09/10 Javascript
如何在 Vue 中使用 JSX
2021/02/14 Vue.js
[45:18]完美世界DOTA2联赛循环赛 PXG vs IO 第二场 11.06
2020/11/09 DOTA
Python常用内置模块之xml模块(详解)
2017/05/23 Python
详解python中的 is 操作符
2017/12/26 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
对于Python深浅拷贝的理解
2019/07/29 Python
python 通过视频url获取视频的宽高方式
2019/12/10 Python
Python 一行代码能实现丧心病狂的功能
2020/01/18 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
Selenium及python实现滚动操作多种方法
2020/07/21 Python
Pycharm导入anaconda环境的教程图解
2020/07/31 Python
python把一个字符串切开的实例方法
2020/09/27 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
美国在线家具网站:GDFStudio
2021/03/13 全球购物
《植物妈妈有办法》教学反思
2014/02/25 职场文书
社区活动总结报告
2014/05/05 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
一文彻底理解js原生语法prototype,__proto__和constructor
2021/10/24 Javascript