ExtJS 2.0 实用简明教程之布局概述


Posted in Javascript onApril 29, 2009

ExtJS的布局基类为Ext.layout.ContainerLayout,其它布局都是继承该类。ExtJS的容器组件包含一个layout及layoutConfig配置属性,这两个属性用来指定容器使用的布局及布局的详细配置信息,如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局,该布局只是简单的把元素放到容器中,有的布局需要layoutConfig配置,有的则不需要layoutConfig配置。看代码:

Ext.onReady(function(){ 
new Ext.Panel({ 
renderTo:"hello", 
width:400, 
height:200, 
layout:"column", 
items:[{columnWidth:.5, 
title:"面板1"}, 
{columnWidth:.5, 
title:"面板2"}] 
}); 
});

上面的代码我们创建了一个面板Panel,Panle是一个容器组件,我们使用layout指定该面板使用Column布局。该面板的子元素是两个面板,这两个面板都包含了一个与列布局相关的配置参数属性columnWidth,他们的值都是0.5,也就是每一个面板占一半的宽度。执行上面的程序生成如下图所示的结果:
ExtJS 2.0 实用简明教程之布局概述
Ext中的一些容器组件都已经指定所使用的布局,比如TabPanel使用card布局、FormPanel使用form布局,GridPanel中的表格使用column布局等,我们在使用这些组件的时候,不能给这些容器组件再指定另外的布局。
ExtJS2.0一共包含十种布局,常用的布局有border、column、fit、form、card、tabel等布局,下面我们分别对这几种布局作简单的介绍。
Javascript 相关文章推荐
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
Mar 04 Javascript
基于jquery实现轮播焦点图插件
Mar 31 Javascript
JS实现保留n位小数的四舍五入问题示例
Aug 03 Javascript
vue-loader教程介绍
Jun 14 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
javascript获取图片的top N主色值方法详解
Jan 26 Javascript
总结JavaScript在IE9之前版本中内存泄露问题
Apr 28 Javascript
vuejs router history 配置到iis的方法
Sep 20 Javascript
ExtJS 2.0实用简明教程 之ExtJS版的Hello
Apr 29 #Javascript
ExtJS 2.0实用简明教程 之Ext类库简介
Apr 29 #Javascript
ExtJS 2.0实用简明教程 之Border区域布局
Apr 29 #Javascript
ie 调试javascript的工具
Apr 29 #Javascript
理解JavaScript的caller,callee,call,apply
Apr 28 #Javascript
JS 判断代码全收集
Apr 28 #Javascript
js checkbox(复选框) 使用集锦
Apr 28 #Javascript
You might like
PHP-MySQL教程归纳总结
2008/06/07 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
15 个 JavaScript Web UI 库
2010/05/19 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
jquery 遍历数组 each 方法详解
2016/05/25 Javascript
微信小程序 欢迎界面开发的实例详解
2016/11/30 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
bootstrap模态框关闭后清除模态框的数据方法
2018/08/10 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
Nodejs + Websocket 指定发送及群聊的实现
2020/01/09 NodeJs
微信小程序实现多行文字滚动
2020/11/18 Javascript
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
python中元组的用法整理
2020/06/15 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
python自动生成证件号的方法示例
2021/01/14 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
李宁官方网店:中国运动品牌
2017/11/02 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
动物科学专业毕业生的自我评价
2013/11/29 职场文书
竞争性谈判邀请书
2014/02/06 职场文书
优良学风班申请材料
2014/02/13 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
机关副主任个人四风问题整改措施
2014/09/26 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
怎样评估创业计划书是否有可行性?
2019/08/07 职场文书
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸