周末2天好好学习了下布局,现在都给实现了吧。


5、border布局:

Border布局将容器分为五个区域:north、south、east、west和center。除了center区域外,其他区域都需要设置宽高,center区域宽高与其他区域有关。容器内部除去west、north、east、south的宽高,由center区域自动填满。

 1   Ext.create('Ext.panel.Panel',{
width: 700,
height: 500,
title: 'Border Layout',
layout: 'border',
renderTo: 'border',
margin: '50 150 50 50',
border : true,
defaults:{
xtype: 'panel'
},
items: [{
title: 'North Region is resizable',
region: 'north',
height: 100,
html: 'north',
split: true
},{
title: 'South Region is resizable',
region: 'south',
height: 100,
html: 'south',
split: true
},{
title: 'West Region is collapsible',
region:'west',
width: 200,
collapsible: true,
html: 'west',
margin: '0 5 0 0',
layout: 'fit'
},{
title: 'East Region is collapsible',
region:'east',
width: 200,
collapsible: true,
html: 'east',
margin: '0 0 0 5',
layout: 'fit'
},{
title: 'Center Region',
region: 'center',
html: 'center',
layout: 'fit'
}]
})

效果:

配置项:

  1、region:Border布局下各区域的默认权重. 当某区域项不含weight属性时使用. 此对象必须包含所有区域 ("north", "south", "east" 和 "west").

  2、margin:为组件设置margin. margin 可以是一个数值适用于所有边 或者它可以是每个样式的CSS样式规范, 例如: '10 5 3 10'.


6、card布局:

  Card布局是Fit布局的子类。
     特点:
       1. 容器内只能显示一个子元素,若设置多个子元素,则只显示第一个子元素;
       2. 可通过设置setActiveItem方法来展示其他子元素;
       3. 容器子元素随容器大小变化。
     var navigate = function(panel, direction){
var layout = panel.getLayout();
layout[direction]();
Ext.getCmp('move-prev').setDisabled(!layout.getPrev());
Ext.getCmp('move-next').setDisabled(!layout.getNext());
};
var card = Ext.create('Ext.panel.Panel', {
title: 'Card Layout',
width: 400,
height: 200,
layout: 'card',
activeItem: 0,
renderTo: 'card',
margin: '50 150 50 50',
border: true,
defaults: {
xtype: 'panel',
border: true
},
bbar: [{
id: 'move-prev',
text: 'Back',
handler: function(btn) {
navigate(btn.up("panel"), "prev");
},
disabled: true
},
'->',
{
id: 'move-next',
text: 'Next',
handler: function(btn) {
navigate(btn.up("panel"), "next");
}
}],
items: [{
id: 'card-0',
html: 'Step1'
},{
id: 'card-1',
html: 'Step2'
},{
id: 'card-2',
html: 'Step3'
}]
});

效果:


7、Column布局:

  Column布局为Auto布局的子类,用于设置子元素的宽度。

  特点:
    1. 容器子元素的宽度会随容器宽度而变化;
    2. 容器子元素的高度不随容器高度而变化;  
  配置项:
    columnWidth:子元素配置项。设置子元素的宽度(值必须为百分数或小于1的小数)。

     var column = Ext.create('Ext.panel.Panel',{
title: 'Column Layout',
width: 400,
layout: 'column',
margin: '50 150 50 50',
border: true,
renderTo: 'column',
defaults: {
xtype: 'panel',
border: true,
margin: '2 2 2 2',
height: 100
},
items: [{
html: 'column1',
columnWidth: 1/2
},{
html: 'column2',
columnWidth: .25
},{
html: 'column3',
columnWidth: 1/4
}]
});

效果:


8、Container布局:

  这个是一个布局的基类, 能使当容器只包含一个子元素时, 子元素自动填满容器. 此类应该通过layout :'fit' 属性进行扩展或创建, 通常应该不需要通过 类名关键字进行直接创建.

  Fit并没有任何直接的配置参数(继承的除外), 要通过Fit布局使一个面板填充一个容器, 只需简单的设置容器layout: 'fit'属性, 然后给容器 添加一个唯一面板即可.

     var fit = Ext.create('Ext.panel.Panel',{
title: 'Fit Layout',
width: 400,
height: 200,
layout: 'fit',
margin: '50 150 50 50',
border: true,
renderTo: 'fit',
items: {
title: 'Inner Panel',
html: 'This is the inner panel content!',
margin: '2 2 2 2',
border: true
}
});

效果:


9、VBox与HBox布局:  

  HBox布局与VBox布局相似,差别在于前者用于组织子元素在容器内部水平方向的布局,后者则为垂直方向的布局。
    特点:
      (1) 容器子元素会随容器大小而变化;
      (2) 通过三个可选的配置项来组织子元素相对于容器的宽和高。
    配置项:
        (1) flex:子元素配置项。各个子元素的的flex配置项会相互作用来决定子元素在容器内的宽度(HBox)或者高度(VBox)。以VBox为例,如子元素1的flex为1,而子元素2的flex为2,而容器高度为90,那么子元素1的高度就为30,而子元素2的高度为60,HBox亦然。

           (2) align:layout属性配置项。设置各个子元素的垂直方向的对齐,可选值有:
                  left:默认值,左对齐;
                    center:中心线对齐;
                    strech:使各个子元素的宽度(HBox)或者高度(VBox)为容器body的宽度(HBox)或者高度(VBox)来对齐;
                    strechmax:以最宽的子元素的宽度(HBox)或者高度(VBox)作为其他各个子元素的宽度(HBox)或者高度(VBox)来对齐。
           (3) pack:layout属性配置项。设置所有子元素组成的元素块是紧靠容器的左、中、右中哪个位置,可选值有:
                    start:默认值,靠容器的左边;
                    center:靠中间;
                    end:靠容器的右边。
HBox:

     var hbox = Ext.create('Ext.panel.Panel',{
width: 400,
height: 300,
title: "HBoxLayout Panel",
border: true,
margin: '50 150 50 50',
renderTo: 'hbox',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
title: 'Inner Panel One',
html: 'One',
border: true,
margin: '2 2 2 2',
flex: 2
},{
xtype: 'panel',
title: 'Inner Panel Two',
html: 'One',
border: true,
margin: '2 2 2 2',
flex: 1
},{
xtype: 'panel',
title: 'Inner Panel Three',
html: 'One',
border: true,
margin: '2 2 2 2',
flex: 1
}]
});

VBox:

     var vbox = Ext.create('Ext.panel.Panel',{
width: 400,
height: 300,
title: "VBoxLayout Panel",
border: true,
margin: '50 150 50 50',
renderTo: 'vbox',
layout: {
type: 'vbox',
align: 'center'
},
renderTo: 'vbox',
items: [{
xtype: 'panel',
title: 'Inner Panel One',
html: 'One',
border: true,
margin: '2 2 2 2',
width: 250,
flex: 2
},
{
xtype: 'panel',
title: 'Inner Panel Two',
html: 'Two',
border: true,
margin: '2 2 2 2',
width: 250,
flex: 4
},
{
xtype: 'panel',
title: 'Inner Panel Three',
html: 'Three',
border: true,
margin: '2 2 2 2',
width: '50%',
flex: 4
}]
});

效果:

   


10、Table布局:

  使用Table布局那么将生成HTML的Table标签来作为布局的容器。
    特点:
      1. 可通过配置来设置容器子元素的大小是否随容器的大小变化
    配置项:

      1. columns:设置表格布局的列数;

          2. tableAttrs:设置表格的属性(如style等)
          3. trAttrs:设置行的属性
          4. tdAttrs:设置单元格的属性
          5. colspan:设置跨列数目
          6. rowspan:设置跨行数目
          1、2、3和4为layout配置项的属性,5、6为子元素的配置项。
      注意:子元素的排列次序为由左至右,由上到下。
     var table = Ext.create('Ext.panel.Panel',{
title: 'Table Layout',
width: 400,
height: 160,
renderTo: 'table',
border: true,
margin: '50 150 50 50',
layout: {
type: 'table',
columns: 3
},
defaults: { border: true,
margin: '2 2 2 2',
},
items: [{
html: 'Cell A content',
rowspan: 2
},{
html: 'Cell B content',
colspan: 2
},{
html: 'Cell C content',
cellCls: 'highlight'
},{
html: 'Cell D content'
}]
});

效果:



这些都是一些基本布局,更多复杂应用也只不过是布局的嵌套,具体实现成什么样,还得看实际上的需求。

多多练习各种情况下的用法,熟悉各种配置,是以后在学习工作中的首要任务。

【ExtJS】FormPanel 布局(二)的更多相关文章

  1. ExtJs FormPanel布局

    FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局表单,最重要的是正确分割,分割结果直接 ...

  2. Extjs关于FormPanel布局

    Extjs关于FormPanel布局 FormPanel有两种布局:form和column,form是纵向布局,column为横向布局.默认为后者.使用layout属性定义布局类型.对于一个复杂的布局 ...

  3. ExtJs常用布局--layout详解(含实例)

    序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...

  4. 无废话ExtJs 入门教程二十一[继承:Extend]

    无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...

  5. 无废话ExtJs 入门教程二十[数据交互:AJAX]

    无废话ExtJs 入门教程二十[数据交互:AJAX] extjs技术交流,欢迎加群(521711109) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...

  6. 无废话ExtJs 入门教程二[Hello World]

    无废话ExtJs 入门教程二[Hello World] extjs技术交流,欢迎加群(201926085) 我们在学校里学习任何一门语言都是从"Hello World"开始,这里我 ...

  7. 基本CSS布局二

    基本CSS布局二------基本页面布局二 /*主面板样式*/ #container { width:100%; margin:0px auto;/*主面板DIV居中*/ } /*顶部面板样式*/ # ...

  8. 【ExtJS】FormPanel 布局(一)

    准备工作,布置一个最简单的Form,共5个组件,都为textfield. Ext.onReady(function(){ Ext.create('Ext.form.Panel', { width: 5 ...

  9. Extjs Column布局常见问题及解决方法

    原文地址:http://blog.csdn.net/weoln/article/details/4339533 第一次用Extjs的column布局时遇见了很多问题,记录下来,供大家参考.column ...

随机推荐

  1. VC++下的Unicode编程

    ASCII是用来表示英文字符的一种编码规范.每个ASCII字符占用1个字节,因此,ASCII编码可以表示的最大字符数是255(00H—FFH). 其实,英文字符并没有那么多,一般只用前128个(00H ...

  2. mybatis--mapper配置总结

    mapper介绍 mapper使用规则:按业务划分,一个业务模块相关的sql均定义在一个mapper文件 mapper的xml格式: doctype: <!DOCTYPE mapper PUBL ...

  3. CentOS下Docker与.netcore(二) 之 Dockerfile

    CentOS下Docker与.netcore(一) 之 安装 CentOS下Docker与.netcore(二) 之 Dockerfile CentOS下Docker与.netcore(三)之 三剑客 ...

  4. django DatabaseFunctions

    from django.db.functions import ... Cast() 转换类型 value = Value.objects.annotate(field_as_float=Cast(' ...

  5. 如何用Python做Web开发?——Django环境配置

    用Python做Web开发,Django框架是个非常好的起点.如何从零开始,配置好Django开发环境呢?本文带你一步步无痛上手.     概念 最近有个词儿很流行,叫做“全栈”(full stack ...

  6. Public Bike Management (30)(DFS,VRCTOR,模拟)(PAT甲级)

    #include<bits/stdc++.h>using namespace std;const int inf = 1e9;int sum,n,tar,m;int num[507];in ...

  7. maven(私库)上传jar包

    在实际开发过程中,我们经常会遇到需要引用的jar依赖,在我们公司的maven仓库不存在,这个时候我们就需要把jar上传上去,在项目中添加对应依赖就OK了. 步骤1:下载jar 在http://mvnr ...

  8. 洛谷P3613 睡觉困难综合征

    传送门 题解 人生第一道由乃…… 做这题之前应该先去把这一题给切掉->这里 我的题解->这里 然后先膜一波zsy大佬和flashhu大佬 大体思路就是先吧全0和全1的都跑答案,然后按位贪心 ...

  9. [Swift]在Swift中实现自增(++)、自减(--)运算符:利用extension扩展Int类

    自增(++).自减(--)运算符主要用在For循环中,Swift有自己更简易的循环遍历方法,而且类似x- ++x这种代码不易维护. Swift为了营造自己的编码风格,树立自己的代码精神体系,已经不支持 ...

  10. 制作基于centos可以ssh连接的容器以及tomcat容器

    可以ssh连接的centos容器 参考:http://blog.csdn.net/mexel310/article/details/51705777 一. pull好镜像后,运行容器 1. docke ...