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 相关文章推荐
多广告投放代码 推荐
Nov 13 Javascript
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
动态为事件添加js代码示例
Feb 15 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
javascript数组遍历的方法实例分析
Sep 13 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
Feb 14 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 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中基本符号及使用方法
2010/03/23 PHP
PHP排序算法的复习和总结
2012/02/15 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
实例讲解PHP中使用命名空间
2019/01/27 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
许愿墙中用到的函数
2006/10/07 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
Javascript 匿名函数及其代码模式原理
2010/03/19 Javascript
js select option对象小结
2013/12/20 Javascript
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
JS使用cookie实现DIV提示框只显示一次的方法
2015/11/05 Javascript
详解Javascript事件驱动编程
2016/01/03 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
jQuery插件FusionCharts绘制的3D环饼图效果示例【附demo源码】
2017/04/02 jQuery
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
vue router总结 $router和$route及router与 router与route区别
2019/07/05 Javascript
浅谈webpack和webpack-cli模块源码分析
2020/01/19 Javascript
python实现逆波兰计算表达式实例详解
2015/05/06 Python
python实现的文件同步服务器实例
2015/06/02 Python
Python循环语句中else的用法总结
2016/09/11 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
Python多线程原理与用法详解
2018/08/20 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
Pytorch模型转onnx模型实例
2020/01/15 Python
python机器学习库xgboost的使用
2020/01/20 Python
HTML5 embed 标签使用方法介绍
2013/08/13 HTML / CSS
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
外贸英文求职信范文
2015/03/19 职场文书
民事答辩状格式范文
2015/05/21 职场文书