extjs Border边框布局
类别:Web前端 浏览量:18387
时间:2013-8-5 extjs Border边框布局
extjs Border边框布局border布局包含多个子面板,是一个面向应用的UI风格的布局,它将整个容器分为5个部分,分别是:east(东)、south(南)、west(西)、north(北)、center(中)。加入到容器中的子面板需要指定region配置下来告知容器要加入到那个部分。
一、下面介绍一个简单的实例:
Ext.onReady(function() { Ext.create('Ext.panel.Panel', { title: '容器面板', renderTo: 'li1', 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。
您可能感兴趣
- Extjs中FieldSet的收缩和展开
- extjs checkboxGroup 复选框的用法
- ExtJs中getCmp、getDom、Get的区别
- extjs中Toolbar工具栏
- extjs中treegrid
- extjs 日期控件
- ExtJs 中Viewport 的使用
- Extjs updateProgress进度条的应用
- extjs radiogroup赋值和取值
- extjs中treepanel例子
- extjs Border边框布局
- ExtJs中XTemplate使用
- Extjs msgTarget 提示位置
- extjs实现树形下拉框
- extjs table布局
- ExtJs中Store的种类
- 红色代表什么(红色代表什么意义和象征)
- 菲律宾安全吗(菲律宾安全吗2023)
- 彩礼重要吗()
- 写信告诉我今天海是什么颜色(写信告诉我今天海是什么颜色回答)
- 英语难学吗(法语比英语难学吗)
- 今天要吃什么(今天要吃什么菜好)
热门推荐
- 如何看云服务器日志(云服务器怎么查看日志的步骤)
- dedecms如何提高网站权重(dede网站内容页如何调取栏目页标题及关键字组合为seo标题)
- php构成方法的关键字是(PHP中的self关键字详解)
- php入门教程环境搭建教程(PHP从零开始打造自己的MVC框架之入口文件实现方法详解)
- 如何实现让dede三级栏目数据调用(dede调取三级栏目名及栏目下的内容列表的方法)
- python条形码识别(python3转换code128条形码的方法)
- 用html5做一个音乐的播放器(HTML5自定义mp3播放器源码)
- dedecms搜索功能怎么设置详细(DEDECMS 隔行换色以及分组加线修改方法)
- phplaravel开发规范(Laravel解决nesting level错误和隐藏index.php的问题)
- 数据库知识点总结归纳(数据库日常练习题,每天进步一点点1)