ITPub博客
首页 博客 专栏 学院 社区 IT新媒体评选
发博

首页 > 应用开发 > IT综合 > Ext.js4.2.1 Ext.container.Container

Ext.js4.2.1 Ext.container.Container

原创 IT综合 作者：百联达 时间：2017-08-14 14:20:15 0 删除 编辑
一：简介

任何包含其它组件的组件的基类，容器最基本的操作包括对其内部组件进行添加，插入和删除。

最常用的容器类包含Ext.panel.Panel,Ext.window.Window,和Ext.tab.Panel.

可以简单的创建一个容器：

点击(此处)折叠或打开

  1. // 显式创建一个容器
  2. Ext.create('Ext.container.Container', {
  3.     layout: {
  4.         type: 'hbox'
  5.     },
  6.     width: 400,
  7.     renderTo: Ext.getBody(),
  8.     border: 1,
  9.     style: {borderColor:'#000000', borderStyle:'solid', borderWidth:'1px'},
  10.     defaults: {
  11.         labelWidth: 80,
  12.         // 隐式创建容器通过指定的xtype
  13.         xtype: 'datefield',
  14.         flex: 1,
  15.         style: {
  16.             padding: '10px'
  17.         }
  18.     },
  19.     items: [{
  20.         xtype: 'datefield',
  21.         name: 'startDate',
  22.         fieldLabel: 'Start date'
  23.     },{
  24.         xtype: 'datefield',
  25.         name: 'endDate',
  26.         fieldLabel: 'End date'
  27.     }]
  28. });

二：Layout

容器类把子组件的渲染任务赋予给了一个layout管理类，必须通过一个layout配置属性配置到容器当中。

当为容器添加子item或者动态的添加组件时，需要考虑如何组织他们的布局和大小。默认情况下，容器会按先后顺序进行布局。

某些容器允许动态的添加子组件，但是下面的这些容器却不允许：Ext.layout.container.Card，Ext.layout.container.Anchor，Ext.layout.container.VBox， Ext.layout.container.HBox，
和Ext.layout.container.Table。

layout枚举值:

1.absolute:  通过坐标位置来布局


点击(此处)折叠或打开

  1. Ext.create('Ext.panel.Panel',{
  2.      layout:'absolute',
  3.      title:'Ext.layout.container.Absolute布局示例',
  4.      frame:false,
  5.      height:150,
  6.      width:300,
  7.      renderTo:Ext.getBody(),
  8.      defaults:{
  9.      frame:true,
  10.      height:70,
  11.      width:100,
  12.      bodyStyle:'background-color:#FFFFFF;padding:15px'//设置面板体的背景色
  13.      },
  14.      items:[{
  15.      x:10,//横坐标为距父容器左边缘10像素的位置
  16.      y:10,//纵坐标为距父容器上边缘10像素的位置
  17.      html:'子面板一',
  18.      title:'子面板一'
  19.      },{
  20.      x:130,//横坐标为距父容器左边缘130像素的位置
  21.      y:40,//纵坐标为距父容器上边缘40像素的位置
  22.      html:'子面板二',
  23.      title:'子面板二'
  24.      }]
  25.     
  26.      })

2.accorion: 折叠式布局，每次只能有一个展开


点击(此处)折叠或打开

  1. Ext.create("Ext.panel.Panel", {
  2.             title: "Ext.layout.container.Accordion示例",
  3.             frame: true,
  4.             width: 300,
  5.             height: 200,
  6.             renderTo: Ext.getBody(),
  7.             bodyPadding: 5,
  8.             layout: "accordion",
  9.             defaults: {
  10.                 bodyStyle: "background-color:#FFFFFF"
  11.             },
  12.             items: [{
  13.                 title: "嵌套面板一",
  14.                 html: "面板一"
  15.             }, {
  16.                 title: "嵌套面板二",
  17.                 html: "面板二"
  18.             }, {
  19.                 title: "嵌套面板三",
  20.                 html: "面板三"
  21.             }]
  22.         });
3.anchor: 根据容器的相对位置布局


点击(此处)折叠或打开

  1. Ext.create('Ext.Panel', {
  2.     width: 500,
  3.     height: 400,
  4.     title: "AnchorLayout Panel",
  5.     layout: 'anchor',
  6.     renderTo: Ext.getBody(),
  7.     items: [
  8.         {
  9.             xtype: 'panel',
  10.             title: '75% Width and 20% Height',
  11.             anchor: '75% 20%'
  12.         },
  13.         {
  14.             xtype: 'panel',
  15.             title: 'Offset -300 Width & -200 Height',
  16.             anchor: '-300 -200'
  17.         },
  18.         {
  19.             xtype: 'panel',
  20.             title: 'Mixed Offset and Percent',
  21.             anchor: '-250 20%'
  22.         }
  23.     ]
  24. });
4.auto: 未指定layout属性的容器默认的布局方式

点击(此处)折叠或打开

  1. Ext.create('Ext.Panel', {
  2.     width: 500,
  3.     height: 280,
  4.     title: "AutoLayout Panel",
  5.     layout: 'auto',
  6.     renderTo: document.body,
  7.     items: [{
  8.         xtype: 'panel',
  9.         title: 'Top Inner Panel',
  10.         width: '75%',
  11.         height: 90
  12.     },
  13.     {
  14.         xtype: 'panel',
  15.         title: 'Bottom Inner Panel',
  16.         width: '75%',
  17.         height: 90
  18.     }]
  19. });

5.border:这是一个支持多层嵌套面板，区域之间的自动形成一个多窗格，面向应用的UI布局风格内置的展开和折叠区域。布局将界面分为上下左右中五个区域，分别用north、south、west、east、center来表示，它的每个子项用region指定元素的位置。


点击(此处)折叠或打开

  1. Ext.create('Ext.panel.Panel', {
  2.          width: 500,
  3.          height: 300,
  4.          title: 'Border Layout',
  5.          layout: 'border',
  6.          defaults :{
  7.              style : {borderStyle:'solid'}
  8.          },
  9.          items: [{
  10.          title: 'South Region is resizable',
  11.          region: 'south', // position for region
  12.          xtype: 'panel',
  13.          height: 100,
  14.          split: true, // enable resizing
  15.          margins: '0 5 5 5'
  16.          },{
  17.          // xtype: 'panel' implied by default
  18.          title: 'West Region is collapsible',
  19.          region:'west',
  20.          xtype: 'panel',
  21.          margins: '5 0 0 5',
  22.          width: 200,
  23.          collapsible: true, // make collapsible
  24.          id: 'west-region-container',
  25.          layout: 'fit'
  26.          },{
  27.          title: 'Center Region',
  28.          region: 'center', // center region is required, no width/height specified
  29.          xtype: 'panel',
  30.          layout: 'fit',
  31.          margins: '5 5 0 0'
  32.          }],
  33.          renderTo: Ext.getBody()
  34.         })

6.box: HBox,VBox的基础类

7.card:这种布局管理多个子组件，每个装到集装箱，其中只有一个子组件可以在任何给定的时间是可见的。这种布局的样式是最常用的向导，标签的实现等


点击(此处)折叠或打开

  1. var p = Ext.create('Ext.panel.Panel', {
  2.          layout: 'card',
  3.          items: [
  4.          { html: 'Card 1' },
  5.          { html: 'Card 2' }
  6.          ],
  7.          renderTo: Ext.getBody()
  8.         });

  10.         p.getLayout().setActiveItem(0)
8.checkboxgroup: 该种布局的实现类为Ext.form.CheckboxGroup和Ext.form.RadioGroup


点击(此处)折叠或打开

  1. Ext.create('Ext.form.CheckboxGroup', {
  2.             id : 'myGroup',
  3.             xtype : 'checkboxgroup',
  4.             renderTo : Ext.getBody(),
  5.             fieldLabel : 'Single Column',
  6.             itemCls : 'x-check-group-alt',
  7.             columns : 3,
  8.             items : [ {
  9.                 boxLabel : '唱歌',
  10.                 name : '1'
  11.             }, {
  12.                 boxLabel : '游泳',
  13.                 name : '2',
  14.                 checked : true
  15.             }, {
  16.                 boxLabel : '看书',
  17.                 name : '3'
  18.             }, {
  19.                 boxLabel : '旅游',
  20.                 name : '4'
  21.             }, {
  22.                 boxLabel : '游戏',
  23.                 name : '5'
  24.             }, {
  25.                 boxLabel : '睡觉',
  26.                 name : '6'
  27.             } ]
  28.         })

9.把整个容器看成一列,然后向容器放入子元素


点击(此处)折叠或打开

  1. Ext.create('Ext.panel.Panel', {
  2.          title: 'Column Layout - Percentage Only',
  3.          width: 350,
  4.          height: 250,
  5.          layout:'column',
  6.          items: [{
  7.          title: 'Column 1',
  8.          columnWidth: 0.25
  9.          },{
  10.          title: 'Column 2',
  11.          columnWidth: 0.55
  12.          },{
  13.          title: 'Column 3',
  14.          columnWidth: 0.20
  15.          }],
  16.          renderTo: Ext.getBody()
  17.         });

10.container: 自定义布局的基础类

11.fit:Fit Layout 是很常用的一种布局，在Fit布局中，子元素将自动填满整个父容器。
如果在Fit 布局中放置了多个组件，则只会显示第一个子元素。典型的案例就是当客户要求一个window或panel中放置一个GRID组件，grid组件的大小会随着父容器的大小改变而改变。


点击(此处)折叠或打开

  1. Ext.create('Ext.panel.Panel', {
  2.          title: 'Fit Layout',
  3.          width: 300,
  4.          height: 150,
  5.          layout:'fit',
  6.          items: {
  7.          title: 'Inner Panel',
  8.          html: 'This is the inner panel content',
  9.          bodyPadding: 20,
  10.          border: false
  11.          },
  12.          renderTo: Ext.getBody()
  13.         });

12.form: 表单布局


点击(此处)折叠或打开

  1. Ext.create('Ext.Panel', {
  2.             width : 500,
  3.             height : 300,
  4.             title : "FormLayout Panel",
  5.             layout : 'form',
  6.             renderTo : Ext.getBody(),
  7.             bodyPadding : 5,
  8.             defaultType : 'textfield',
  9.             items : [ {
  10.                 fieldLabel : 'First Name',
  11.                 name : 'first',
  12.                 allowBlank : false
  13.             }, {
  14.                 fieldLabel : 'Last Name',
  15.                 name : 'last'
  16.             }, {
  17.                 fieldLabel : 'Company',
  18.                 name : 'company'
  19.             }, {
  20.                 fieldLabel : 'Email',
  21.                 name : 'email',
  22.                 vtype : 'email'
  23.             }, {
  24.                 fieldLabel : 'DOB',
  25.                 name : 'dob',
  26.                 xtype : 'datefield'
  27.             }, {
  28.                 fieldLabel : 'Age',
  29.                 name : 'age',
  30.                 xtype : 'numberfield',
  31.                 minValue : 0,
  32.                 maxValue : 100
  33.             }, {
  34.                 xtype : 'timefield',
  35.                 fieldLabel : 'Time',
  36.                 name : 'time',
  37.                 minValue : '8:00am',
  38.                 maxValue : '6:00pm'
  39.             } ],
  40.             renderTo : Ext.getBody()
  41.         });
13.hbox:横向排列跨越容器项目的布局。这种布局划分可选包含数字柔性配置的子项之间的可用的水平空间


点击(此处)折叠或打开

  1. Ext.create('Ext.Panel', {
  2.          width: 500,
  3.          height: 300,
  4.          title: "HBoxLayout Panel",
  5.          layout: {
  6.          type: 'hbox',
  7.          align: 'stretch'
  8.          },
  9.          renderTo: document.body,
  10.          items: [{
  11.          xtype: 'panel',
  12.          title: 'Inner Panel One',
  13.          flex: 2
  14.          },{
  15.          xtype: 'panel',
  16.          title: 'Inner Panel Two',
  17.          flex: 1
  18.          },{
  19.          xtype: 'panel',
  20.          title: 'Inner Panel Three',
  21.          flex: 1
  22.          }],
  23.          renderTo: btn10
  24.         });

14.table:Table Layout 将内容绘制在table标签中，table的列数可以指定，还可以通过设置rowSpan和colSpan来创建复杂的布局


点击(此处)折叠或打开

  1. Ext.create('Ext.panel.Panel', {
  2.          title: 'Table Layout',
  3.          width: 300,
  4.          height: 150,
  5.          layout: {
  6.          type: 'table',
  7.          columns: 3
  8.          },
  9.          defaults: {
  10.          bodyStyle: 'padding:20px;',
  11.          borderStyle:'solid'
  12.          },
  13.          items: [{
  14.          html: 'Cell A content',
  15.          rowspan: 2
  16.          },{
  17.          html: 'Cell B content',
  18.          colspan: 2
  19.          },{
  20.          html: 'Cell C content',
  21.          cellCls: 'highlight'
  22.          },{
  23.          html: 'Cell D content'
  24.          }],
  25.          renderTo: Ext.getBody()
  26.         });

15.vbox:以垂直的方式组织所有子元素。它的子元素可以通过align属性来设置对齐方式，vbox的对齐方式有：
left : 左对齐，默认对其方式
center : 中间对齐
right : 右对齐
stretch : 以父容器的宽度拉伸对齐
stretchmax : 以所有子元素中的最大宽度拉伸对齐


点击(此处)折叠或打开

  1. Ext.create('Ext.Panel', {
  2.          width: 500,
  3.          height: 400,
  4.          title: "VBoxLayout Panel",
  5.          layout: {
  6.          type: 'vbox',
  7.          align: 'center'
  8.          },
  9.          renderTo: document.body,
  10.          items: [{
  11.          xtype: 'panel',
  12.          title: 'Inner Panel One',
  13.          width: 250,
  14.          flex: 2
  15.          },
  16.          {
  17.          xtype: 'panel',
  18.          title: 'Inner Panel Two',
  19.          width: 250,
  20.          flex: 4
  21.          },
  22.          {
  23.          xtype: 'panel',
  24.          title: 'Inner Panel Three',
  25.          width: '50%',
  26.          flex: 4
  27.          }],
  28.          renderTo: btn9
  29.         });


三：Config

1.activeItem:String/Number(子组件id 或者是子组件所在容器的索引)


设置该属性的目的是设置那个子组件在最初显示的容器的布局上渲染. 如：activeItem: 'itemId-1' or activeItem: 0 (容器中的第一个子组件).


适用于一次只能显示一个item的布局样式，如Ext.layout.container.Card 或Ext.layout.container.Fit 


2.anchorSize


锚点的大小


3.autoDestory:Boolean


默认为true,表示自动销毁容器内的所有子组件


4.defaults


对所有通过add或insert添加的item设置统一的属性。


默认属性将会应用到所有的子组件上，但是不会覆盖子组件本身已经有的属性。


如：
用法:  
defaults: { // defaults 将会应用所有的子组件上,而不是父容器  
    autoScroll: true  
},  
items: [  
    // panel1 已经存在 autoScroll: false 所以 defaults将不会应用  
    {  
        xtype: 'panel',  
        id: 'panel1',  
        autoScroll: false  
    },  
    // panel2 将会 autoScroll: true  
    new Ext.panel.Panel({  
        id: 'panel2'  
    })  
]  


5.items


单个组件,或者是以数组形式定义的子组件集合 将会自动添加到容器中去


如果开发者没有配置layout属性， 默认是按顺序将子组件渲染到在容器中，


不考虑子组件的大小和定位。


如果子组件是指定的,它的实际组件的类型将根据xtype选项进行实例化. 每个组件都有各自的xtype.


如果没有指定 xtype, 那么将会使用 defaultType，默认是panel.


不要定义contentEl 或者 html作为子组件

来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/28624388/viewspace-2143481/ ，如需转载，请注明出处，否则将追究法律责任。

0
0
上一篇： Ext.js4.2.1 Ext.Component
下一篇： Ext.js4.2.1 Ext.panel.Panel
请登录后发表评论 登录
全部评论
百联达
专家姓名：耿冲
15年以上互联网经验，先后从事过制造业，证券业，物业行业和物流行业信息系统和互联网产品的设计落地实施，8年系统架构经验。最近关注企业数字化转型、财务数字化服务共享、大语言模型、Kubernetes微服务架构和Istio微服务治理框架。

注册时间：2013-02-05

  • 博文量
    332
  • 访问量
    1265641

最新文章

支持我们 作者招募 用户协议 FAQ Contact Us

北京盛拓优讯信息技术有限公司. 版权所有  京ICP备16024965号-8 北京市公安局海淀分局网监中心备案编号：11010802021510 niuxiaotong@pcpop.com 17352615567 未成年人举报专区

广播电视节目制作经营许可证(京) 字第1234号 中国互联网协会会员

违法和不良信息举报电话:18101376593