1
介绍
布局,简单来说就是设置元素的大小和位置。
Ext 的布局系统包括组件,布局,容器,容器是一种特殊的组件,可以管理组件的大小和位置。
容器是通过 doLayout 来重新计算布局,并更新 DOM.
2
手工布局是不必要的,框架会为你自动处理。当然为了性能,可以进行手工布局。
ct.suspendLayout = true;
ct.add(...);
ct.suspendLayout = false;
ct.doLayout();
3
布局类型:
组件布局
dock
tip
容器布局
auto
card
fit
hbox
vbox
anchor
table
absolute
column
3
Ext大部分容器默认使用auto布局,默认不使用auto布局的容器:
FieldSet
anchor
ButtonGroup
table
FormPanel | RowEditor
anchor
TabPanel
card
Toolbar | Paging
hbox
4
各种布局的使用与配置:
auto
子组件属性:
width
height
column:
如果每个子组件的宽度小10,列布局失效。缩放有问题。
子组件属性:
columnWidth 百分比
table :
容器属性:
columns 列数
子组件属性:
colspan
rowspan
border :
容器属性:
layout.align
子组件属性:
region west l|east r |center |south b|north t
width
height
hbox |vbox
可指定溢出处理,伸缩效果好。
容器属性:
layout.align
子组件属性:
flex
accordion
伸缩
checkboxgroup
通常适合单选,多选组件
容器属性:
vertical
columns
fit
伸缩效果好
但只能有一个子组件.
card
卡片布局
anchor
伸缩效果好
子组件属性:
anchor : "100% 50%" 百分比
anchor : "-20, -20" 偏移(相对右下边)
absolute
子组件属性:
x
y
分享到:
相关推荐
ExtJs4 layout 布局 这是鄙人之前自学Ext时收集的文档,详细讲诉了各种布局,并附源码与界面展示,希望能给你带来帮助
panel的accordion布局以及treepanel动态导航示例
用extjs4搭的一个简单布局框架
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
Extjs4可用的学习资料少之又少,本文内容大部分为网络整理、 方便学习者使用,如有出入以extjs4api文档为准。 1、1Extjs初步 2、Extjs4布局详解 3、Extjs4文档阅读 4、示例 5、员工管理系统
用ExtJS4.1布局后台系统,这个是自写的js,extjs4.1的源码包,需要到extjs.org.cn下载。
纯Extjs代码,对初学Ext有点点帮助
ExtJS布局之border实例,有代码 border布局是常见的布局样式,下面是一个实际项目的示例,比较简单,仅供初学者参考。
很好的ext页面布局自动生成功能,快速布局,减少你页面开发时间!用法:解压->添加文件夹到一个web工程当中->进入index.html进入页面编辑就可以自由设计你的布局了,代码在查看/修改中可以看到,只需复制粘贴到自己...
三、Extjs布局 EXTJS4自学手册——EXT容器布局(Auto,Anchor,Absolute,Hbox) EXTJS4自学手册——EXT容器布局(Vbox,Accordion,Table,Column) EXTJS4自学手册——EXT容器布局(Fit,Card,Border) EXTJS4自学手册...
资源名称:Extjs中布局的组合使用 中文WORD版内容简介:本文档主要讲述的是Extjs中布局的组合使用;Extjs4.1中布局很经典,也很好用,关键是如何组合布局,组合布局,不仅要达到我们想要的界面效果,还要注意因为...
Extjs布局实例
ExtJS 4 复杂 百叶窗(accordion)布局
Extjs布局教程,Extjs 布局,非常好用的Extjs布局教程
左边菜单,右边是内容,北边是log图片 简单首页布局示例
Extjs4 API文档阅读(三)——布局和容器 Extjs4 API文档阅读(二)——MVC构架(上) Extjs4 API文档阅读(二)——MVC构架(下) Extjs4 API文档阅读(四)——Data ExtJS4 Grid组件 Extjs4 TreeGrid Extjs4 TreePanel...
extjs本地布局编辑器~开发extjs的好工具,推荐下载。html页面,方便
extjs4-教程搭建 ExtJS 入门学习、可视化开发环境、布局详解 、文档阅读
Extjs4API文档阅读(三)——布局和容器[参照].pdf