无废话ExtJs 入门教程十六[页面布局：Layout]
首先解释什么是布局：
来自百度词典的官方解释：◎ 布局 bùjú： [distribution;layout] 对事物的全面规划和安排，布：陈设；设置。
我对布局理解是“把**东西放在**位置显示”[动词]。
ok，我们这节课就讲一下怎么样把 ExtJs 的组件，放到我们想放置的位置。
一、常用布局
(1)ContainerLayout：默认布局方式，其他布局继承该类进行扩展功能。显示：将内部组件以垂直方式叠加。如下所示：
组件一.....
组件二.....
(2)FormLayout：产生类似表单的外观。显示：将内部组件以垂直方式叠加。如上所示：
(3)ColumnLayout：将组件以水平方式放置。如下所示：
组件一[第一列] 组件二[第二列] 组件三[第三列]
(4)BorderLayout：一个盒子里摆放5个位置，东、南、西、北、中[即：上下左右中间]。开发的时候经常用来做后台框架的布局，如下所示：
北
西 中 东
南
(5)AccordionLayout：手风琴布局，可以折叠的布局。开发的时候常用来对左侧的功能列表进行分类，如下图所示：
折叠状态---
展开状态[包含内容一和二]---
内容一--
内容二--
折叠状态---
(6)FitLayout：强迫子组件填充满容器布局。
(7)TableLayout：表格布局，含有行与列的概念。
二、实例
1.代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <!--ExtJs框架开始-->
6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
7 <script type="text/javascript" src="/Ext/ext-all.js"></script>
8 <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
9 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
10 <!--ExtJs框架结束-->
11 <script type="text/javascript">
12 Ext.onReady(function () {
13 //------ContainerLayout开始------//
14 var box1 = new Ext.BoxComponent({
15 autoEl: {
16 tag: 'div',
17 style: 'background:red;width:300px;height:30px',
18 html: 'box1'
19 }
20 });
21 var box2 = new Ext.BoxComponent({
22 autoEl: {
23 tag: 'div',
24 style: 'background:yellow;width:300px;height:30px',
25 html: 'box2'
26 }
27 });
28 var box3 = new Ext.BoxComponent({
29 autoEl: {
30 tag: 'div',
31 style: 'background:blue;width:300px;height:30px;color:#fff',
32 html: 'box3'
33 }
34 });
35 var containerlayout = new Ext.Container({
36 layout: 'form',
37 items: [box1, box2, box3],
38 renderTo: 'ContainerLayout'
39 });
40 //------ContainerLayout结束-----//
41 //------FormLayout开始------//
42 var formlayout = new Ext.Panel({
43 title: 'FormLayout',
44 layout: 'form',
45 items: [
46 new Ext.form.TextField({ fieldLabel: '用户名' }),
47 new Ext.form.TextField({ fieldLabel: '密码' }),
48 new Ext.form.TextField({ fieldLabel: '重复密码' })
49 ],
50 renderTo: 'FormLayout'
51 });
52 //------FormLayout结束------//
53 //------ColumnLayout开始------//
54 var ColumnLayout = new Ext.Panel({
55 width: 600,
56 title: 'ColumnLayout',
57 layout: 'column',
58 items: [
59 new Ext.form.FormPanel({ title: '第一列', columnWidth: .33, labelWidth: 50, items: [
60 new Ext.form.TextField({ fieldLabel: '用户名' })]
61 }),
62 new Ext.form.FormPanel({ title: '第二列', columnWidth: .33, labelWidth: 50, items: [
63 new Ext.form.TextField({ fieldLabel: '密码' })]
64 }),
65 new Ext.form.FormPanel({ title: '第三列', columnWidth: .34, labelWidth: 80, items: [
66 new Ext.form.TextField({ fieldLabel: '重复密码' })]
67 })
68 ],
69 renderTo: 'ColumnLayout'
70 });
71 //------ColumnLayout结束------//
72 //------BorderLayout开始------//
73 var BorderLayout = new Ext.Panel({
74 title: 'BorderLayout',
75 layout: 'border',
76 width: 1100,
77 height: 300,
78 items: [
79 new Ext.Panel({ title: '上北', region: 'north', html: '可以放个logo什么的' }),
80 new Ext.Panel({ title: '下南', region: 'south', html: '版权信息？', autoEl: 'center' }),
81 new Ext.Panel({ title: '中间', region: 'center', html: '主面板' }),
82 new Ext.Panel({ title: '左东', region: 'west', html: '树型菜单或是手风琴' }),
83 new Ext.Panel({ title: '右西', region: 'east', html: '常用功能或是去掉？' })
84 ],
85 renderTo: 'BorderLayout'
86 });
87 //------BorderLayout结束------//
88 //------AccordionLayout开始------//
89 var AccordionLayout = new Ext.Panel({
90 title: 'AccordionLayout',
91 layout: 'accordion',
92 height: 200,
93 items: [
94 new Ext.Panel({ title: '用户管理', items: [new Ext.BoxComponent({ autoEl: { tag: 'div', html: '用户管理'} })] }),
95 new Ext.Panel({ title: '角色管理', items: [new Ext.BoxComponent({ autoEl: { tag: 'div', html: '角色管理'} })] }),
96 new Ext.Panel({ title: '系统管理', items: [new Ext.BoxComponent({ autoEl: { tag: 'div', html: '系统管理'} })] })
97 ],
98 renderTo: 'AccordionLayout'
99 });
100 //------AccordionLayout结束------//
101 //------FitLayout结束------//
102 var FitLayout = new Ext.Panel({
103 title: 'FitLayout',
104 height: 100,
105 renderTo: 'FitLayout',
106 layout: 'fit',
107 items: [
108 new Ext.Panel({ bodyStyle: 'background:red', html: '使用了fit布局,填充满' }),
109 new Ext.Panel({ bodyStyle: 'background:yellow', html: '这个panel不会显示，因为是fit布局' })
110 ]
111 });
112 var NoFitLayout = new Ext.Panel({
113 title: 'NoFitLayout',
114 height: 100,
115 renderTo: 'FitLayout',
116 items: [
117 new Ext.Panel({ bodyStyle: 'background:yellow', html: '未使用了fit布局,没有填充满' })
118 ]
119 });
120 //------FitLayout结束------//
121 //------TableLayout开始------//
122 var TableLayout = new Ext.Panel({
123 title: 'TableLayout',
124 layout: 'table',
125 layoutConfig: { columns: 3 },
126 defaults: {
127 width: 133,
128 height: 100,
129 autoEl: 'center'
130 },
131 defaultType: 'panel',
132 items: [
133 { html: '行1列1' },
134 { html: '行1列2' },
135 { html: '行[1,2]列3', rowspan: 2, height: 180 },
136 { html: '行2列[1,2]', colspan: 2, width: 266 }
137 ],
138 renderTo: 'TableLayout'
139 });
140 //------TableLayout结束------//
141 });
142 </script>
143 </head>
144 <body>
145 <div id="ContainerLayout" style="float: left; width: 300px">
146 ContainerLayout：垂直方式放置
147 </div>
148 <div id="FormLayout" style="float: left; width: 240px; padding-left: 10px;">
149 </div>
150 <div id="ColumnLayout" style="float: left; width: 500px; padding-left: 10px;">
151 </div>
152 <div id="BorderLayout" style="padding: 10px 0px; clear: both">
153 </div>
154 <div id="AccordionLayout" style="width: 300px; float: left; height: 200px">
155 </div>
156 <div id="FitLayout" style="width: 300px; float: left; height: 200px; padding-left: 10px;">
157 </div>
158 <div id="TableLayout" style="width: 400px; float: left; padding-left: 10px;">
159 </div>
160 </body>
161 </html>
2.效果如下：
3.说明：
(1)fitlayout只能有一个子组件显示，如上190所示，我在里面创建了两个panel，但只有第一个显示。
无废话ExtJs 入门教程十六[页面布局：Layout]的更多相关文章
- 无废话ExtJs 入门教程十九[API的使用]
无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...
- 无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]
无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...
- 无废话ExtJs 入门教程十四[文本编辑器：Editor]
无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...
- 无废话ExtJs 入门教程十二[下拉列表联动：Combobox_Two]
无废话ExtJs 入门教程十二[下拉列表联动:Combobox_Two] extjs技术交流,欢迎加群(201926085) 不管是几级下拉列表的联动实现本质上都是根据某个下拉列表的变化,去动态加载其 ...
- 无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]
无废话ExtJs 入门教程十[单选组:RadioGroup.复选组:CheckBoxGroup] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个单选组,一个复 ...
- 34.无废话ExtJs 入门教程十八[树：TreePanel]
转自:https://www.cnblogs.com/iamlilinfeng/archive/2012/06/28/2566350.html 1. <!DOCTYPE html PUBLIC ...
- 无废话ExtJs 入门教程二十[数据交互：AJAX]
无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
- 无废话ExtJs 入门教程六[按钮：Button]
无废话ExtJs 入门教程六[按钮:Button] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个两个按钮“提交”与重置.如下所示代码区的第68行位置, butt ...
- 无废话ExtJs 入门教程九[数字字段：NumberField、隐藏字段Hidden、日期字段：DataFiedl]
无废话ExtJs 入门教程九[数字字段:NumberField.隐藏字段Hidden.日期字段:DataFiedl] extjs技术交流,欢迎加群(201926085) 继上第六节内容,我们在表单里加 ...
随机推荐
- JQ库函数记忆要点
1.核心(1.核心函数2.对象访问3.数据缓存4.队列控制4.插件机制5.多库共存) 2.属性(1.属性2.css类3.HTML代码/文本/值) 3.选择器(表单,表单对象属性,基本,内容,子元素,层 ...
- NOIP2015 斗地主
Sol 暴力搜索...不用搜1,2张的情况,直接统计出来就可以了. 还有处理一下2和大王小王的位置,扔到最后面或者最前面就可以了. 搜索就搜 3+3,2+2+2,1+1+1+1+1 这三个就可以了. ...
- mapReduce编程之google pageRank
1 pagerank算法介绍 1.1 pagerank的假设 数量假设:每个网页都会给它的链接网页投票,假设这个网页有n个链接,则该网页给每个链接平分投1/n票. 质量假设:一个网页的pagerank ...
- 基于用户相似性的协同过滤——Python实现
代码基本来自项亮的<推荐系统实践>,把书上的伪代码具体实现,还参考了https://www.douban.com/note/336280497/ 还可以加入对用户相似性的归一化操作,效果会 ...
- linux下合并两个文件夹
一.我想把自己自定义的软件统一放到man手册路径里.如何和现有的/usr/local/share文件夹合并起来,原来的文件还在? (1)下面是解压出的自定义的bashdb调试软件==>
- 【leetcode】N-Queens II
N-Queens II Follow up for N-Queens problem. Now, instead outputting board configurations, return the ...
- ZPF MYSQL数据库链接层
2015年3月31日 18:27:34 最后编辑: 2016年4月17日 00:22:00 星期日 读写分离: 根据最终的sql语句来判断是读还是写 (随后会考察并加上一致性哈希) 链式调用: 参看 ...
- Nginx反向代理到Tomcat服务器
在实际生产中,Tomcat服务器一般不单独使用在项目中,对于静态资源的响应Nginx表现的比较好,另外由于nginx是专门用于反向代理的服务器,所以很容易实现将java的请求转发到后端交给tomcat ...
- 一些笔试题（C/C++）
1.there are two variables, don't use if.. else or ?: or switch or other judgement statements,find ou ...
- nyoj116_士兵杀敌（二）_树状数组
士兵杀敌(二) 时间限制:1000 ms | 内存限制:65535 KB 难度:5 描述 南将军手下有N个士兵,分别编号1到N,这些士兵的杀敌数都是已知的. 小工是南将军手下的军师,南将军经常 ...