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与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
浏览器复制插件zeroclipboard使用指南
Mar 26 Javascript
基于Bootstrap使用jQuery实现简单可编辑表格
May 04 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
js清除浏览器缓存的几种方法
Mar 15 Javascript
基于JavaScript中标识符的命名规则介绍
Jan 06 Javascript
浅谈vue父子组件怎么传值
Jul 21 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
JS实现动态倒计时功能(天数、时、分、秒)
Dec 12 Javascript
JavaScript前端面试组合函数
Jun 21 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 将bmp图片转为jpg等其他任意格式的图片
2009/06/21 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
jQuery入门知识简介
2010/03/04 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
JS判断两个时间大小的示例代码
2014/01/28 Javascript
JQuery限制复选框checkbox可选中个数的方法
2015/04/20 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
2018/09/21 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
Tornado高并发处理方法实例代码
2018/01/15 Python
python多维数组切片方法
2018/04/13 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
python修改linux中文件(文件夹)的权限属性操作
2020/03/05 Python
python 错误处理 assert详解
2020/04/20 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
pytorch 把图片数据转化成tensor的操作
2021/03/04 Python
用CSS禁用输入法(CSS3 UI规范)实例解析
2012/12/04 HTML / CSS
世界各地的旅游、观光和活动:Isango!
2019/10/29 全球购物
销售员求职个人的自我评价
2014/02/19 职场文书
文艺晚会策划方案
2014/06/11 职场文书
迎国庆演讲稿
2014/09/15 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
网络管理员岗位职责
2015/02/12 职场文书
小学教师党员承诺书
2015/04/27 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
python爬虫框架feapde的使用简介
2021/04/20 Python
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers
python自动化测试之Selenium详解
2022/03/13 Python