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 选项卡效果 新手代码
Jul 08 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
Jan 16 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
jquery append与appendTo方法比较
May 24 jQuery
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
微信小程序npm引入vant-weapp的踩坑记录
Aug 01 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
JavaScript实现HTML导航栏下拉菜单
Nov 25 Javascript
vue-router定义元信息meta操作
Dec 07 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
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
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
PHP排序算法之归并排序(Merging Sort)实例详解
2018/04/21 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
JQuery.ajax传递中文参数的解决方法 推荐
2011/03/28 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
2013/04/20 Javascript
setTimeout()与setInterval()方法区别介绍
2013/12/24 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
2016/06/12 Javascript
arcgis for js 修改infowindow样式的方法
2016/11/02 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
2017/03/14 Javascript
js编写简单的聊天室功能
2017/08/17 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
[06:59]DOTA2-DPC中国联赛3月7日Recap集锦
2021/03/11 DOTA
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
Python selenium 三种等待方式解读
2016/09/15 Python
python3实现163邮箱SMTP发送邮件
2018/05/22 Python
Python实现html转换为pdf报告(生成pdf报告)功能示例
2019/05/04 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
HTML5 与 XHTML2
2008/10/17 HTML / CSS
YesStyle美国/全球:购买亚洲时装、美容化妆品和生活百货
2017/01/16 全球购物
GafasWorld哥伦比亚:网上购买眼镜
2017/11/28 全球购物
MIRTA官网:手工包,100%意大利制造
2020/02/11 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
致百米运动员广播稿
2014/01/29 职场文书
廉洁自律准则学习心得体会
2016/01/13 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书