页面布局:Layout
来源:互联网 发布:mac压缩为rar 编辑:程序博客网 时间:2024/06/05 20:08
extjs Border边框布局
来源:extjs学习浏览量:15403
2013/8/5 border布局包含多个子面板,是一个面向应用的UI风格的布局,它将整个容器分为5个部分,分别是:east(东)、south(南)、west(西)、north(北)、center(中)。加入到容器中的子面板需要指定region配置下来告知容器要加入到那个部分。
一、下面介绍一个简单的实例:
JScript 代码 复制
Ext.onReady(function(){ Ext.create('Ext.panel.Panel', { title: '容器面板', renderTo: 'div1', width: 450, height: 300, layout: 'border', defaults: { split: true, //是否有分割线 collapsible: true, //是否可以折叠 bodyStyle: 'padding:15px' }, items: [ { //子元素的方位:north、west、east、center、south region: 'north', title: '北', xtype: "panel", html: "子元素1", height: 70 }, { region: 'west', title: '西', xtype: "panel", html: "子元素2", width: 100 }, { region: 'east', title: '东', xtype: "panel", html: "子元素2", width: 100 }, { region: 'center', title: '主体', xtype: "panel", html: "子元素3" }, { region: 'south', title: '南', xtype: "panel", html: "子元素4", height: 70 } ] });});
实例效果如下:
二、使用Border布局时注意事项
1 使用Border布局的容器必须有一个子件在'中心'区域(region:'center')。中心区域的子件将会自动改变尺寸来填充Border布局中没有被使用的其他区域的空间。(如果不指定会报uncaught exception: No center region defined in BorderLayout XXX异常)
2 任何west或east区域的子件都必须定义宽度(一个整数代表该区域占用的像素)(如果不指定布局不起作用,并且还会报col is null的错)
3 任何north或south区域的子件都必须定义高度
4 Border布局的所有区域在被渲染时以及此之后就固定了,其子组件可能无法删除或添加。
5 要添加/删除Border布局内的组件,它们必须是被一个额外的由Border布局直接管理的容器所封装。如果该区域是可收起的(collapsible:true),Border布局管理器直接使用的容器应该是一个Panel。
0 0
- 页面布局(Page Layout )
- 页面布局:Layout
- Ext的layout页面布局解析[转]
- ExtJs 入门教程十六[页面布局:Layout]
- layout+ifram实现菜单页面布局
- layout布局
- 布局layout
- layout 布局
- 布局Layout
- 布局 Layout
- zend framework layout(页面布局)切换器
- magento -- 推荐插件 -- 页面布局分析插件 -- Layout Analyzer
- easyui学习笔记2:页面布局,layout插件
- Thymeleaf利用layout.html文件生成页面布局框架
- 前端框架 EasyUI (2)页面布局 Layout
- thymeleaf模版实现页面布局(layout)两种方法
- iOS 自动布局 Auto Layout 入门 06 详情页面 (b) 按钮的布局
- extjs 布局 layout---Table布局
- 自动创建web.xml
- Linux网络编程
- 使用Pycharm 社区版配合anaconda进行代码编写遇到的一些小问题汇总
- 轻量级javascript移动开发库 zepto
- 数组队列与匿名内部类
- 页面布局:Layout
- JAVA获取服务器路径的方法
- SSL 1217——删边
- Java UDP 重发机制
- poj3468(区间更新)
- 正则表达式
- Design Pattern(5)-Visitor Pattern
- 【深入浅出java多线程】--基础准备篇
- 安卓开发之详解getChildFragmentManager和getsupportFragmentManager和getFragmentManager详解