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 相关文章推荐
js一组验证函数
Dec 20 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
document.getElementBy("id")与$("#id")有什么区别
Sep 22 Javascript
JavaScript学习笔记之基础语法
Jan 22 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
jquery使用经验小结
May 20 Javascript
javascript实现列表切换效果
May 02 Javascript
Bootstrap风格的WPF样式
Dec 07 Javascript
js运算符的一些特殊用法
Jul 29 Javascript
vue使用pdfjs显示PDF可复制的实现方法
Dec 14 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
Dec 24 Javascript
js实现无限层级树形数据结构(创新算法)
Feb 27 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
ThinkPHP学习笔记(一)ThinkPHP部署
2014/06/22 PHP
PHP 7.0.2 正式版发布
2016/01/08 PHP
js传值 判断
2006/10/26 Javascript
javascript的键盘控制事件说明
2008/04/15 Javascript
js left,right,mid函数
2008/06/10 Javascript
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
JS的Document属性和方法小结
2013/09/17 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
分享我对JS插件开发的一些感想和心得
2016/02/04 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
nodejs读取图片返回给浏览器显示
2019/07/25 NodeJs
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
layui+jquery支持IE8的表格分页方法
2019/09/28 jQuery
vue element-ui实现动态面包屑导航
2019/12/23 Javascript
VUE : vue-cli中去掉路由中的井号#操作
2020/09/04 Javascript
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
Python变量作用范围实例分析
2015/07/07 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
python实现梯度下降法
2020/03/24 Python
Python 存取npy格式数据实例
2020/07/01 Python
python中id函数运行方式
2020/07/03 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
C语言面试题
2015/10/30 面试题
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
创业计划书——互联网商机
2014/01/12 职场文书
员工培训邀请函
2014/02/02 职场文书
领导党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
vue3如何优雅的实现移动端登录注册模块
2021/03/29 Vue.js
django 认证类配置实现
2021/11/11 Python
Python之matplotlib绘制饼图
2022/04/13 Python
Python按顺序遍历并读取文件夹中文件
2022/04/29 Python