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 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
javascript unicode与GBK2312(中文)编码转换方法
Nov 14 Javascript
jquery.cookie.js使用指南
Jan 05 Javascript
七个不允许错过的jQuery小技巧
Dec 21 Javascript
JS控制按钮10秒钟后可用的方法
Dec 22 Javascript
使用axios实现上传图片进度条功能
Dec 21 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
vue项目引入Iconfont图标库的教程图解
Oct 24 Javascript
原生js实现trigger方法示例代码
May 22 Javascript
代码解析React中setState同步和异步问题
Jun 03 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入门学习知识点二 PHP简单的分页过程与原理
2011/07/14 PHP
php弹出对话框实现重定向代码
2014/01/23 PHP
如何阻止网站被恶意反向代理访问(防网站镜像)
2014/03/18 PHP
PHP5.5安装PHPRedis扩展及连接测试方法
2017/01/22 PHP
Laravel 解决composer相关操作提示php相关异常的问题
2019/10/23 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
图片之间的切换
2006/06/26 Javascript
jQuery中使用Ajax获取JSON格式数据示例代码
2013/11/26 Javascript
Jquery attr()方法 属性赋值和属性获取详解
2016/04/15 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
vue中实现methods一个方法调用另外一个方法
2018/02/08 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
jquery实现手风琴案例
2020/05/04 jQuery
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
在Python中使用cookielib和urllib2配合PyQuery抓取网页信息
2015/04/25 Python
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
详解Python核心对象类型字符串
2018/02/11 Python
Linux下多个Python版本安装教程
2018/08/15 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
Python 实现国产SM3加密算法的示例代码
2020/09/21 Python
python使用scapy模块实现ping扫描的过程详解
2021/01/21 Python
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
What is view? why do we have view?
2012/06/22 面试题
淘宝网店营销策划书
2014/01/11 职场文书
军人违纪检讨书
2014/02/04 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
停课通知书
2015/04/24 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
四年级作文之说明文作文
2019/10/14 职场文书
Python实现生活常识解答机器人
2021/06/28 Python
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers