Ext.js4.2.1 Ext.container.Container

最新推荐文章于 2022-06-30 22:09:45 发布
最新推荐文章于 2022-06-30 22:09:45 发布
阅读量214 收藏 2
点赞数
一：简介

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

最常用的容器类包含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博客 ” ，链接：http://blog.itpub.net/28624388/viewspace-2143481/，如需转载，请注明出处，否则将追究法律责任。

转载于:http://blog.itpub.net/28624388/viewspace-2143481/

clmaykr95629
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
extjs4.0中文API整理02——Container
好记性不如烂笔头
08-22 3356
extjs4.0中文API整理02——Container 材料来自于extjs官网，翻译参考脚本娃娃的中文版 一、Ext.container.Container 1.任何可能包含其它Ext.Component组件的基类。  容器对于所包含的组件的基本处理包括添加，插入和删除项目。 最常用的的容器类Ext.panel.Panel，Ext.window.Window和 Ext
ext-4.2.1-gpl.zip
09-13
放心使用，ext-4.2.1-gpl.zip,大小52M，ext4.2.1正式版，包含所有源代码、文档、官方示例、jar包、API文档，
ExtJS4学习笔记五－－面板使用
逸雨涵梦的专栏
08-21 1746
标准面板：  Javascript代码   Ext.create('Ext.panel.Panel',{               title:'面板头部（header）',               tbar : ['顶端工具栏(top toolbars)'],               bbar : ['底端工具栏(bottom toolbars)'],
Ext.container.Container
11-20 349
任何可能包含其它Ext.Component组件的基类。 容器对于所包含的组件的基本处理包括添加，插入和删除项目。 包含Ext.Component,又是其他容器的基类 Ext.container.Container Ext.create('Ext.container.Container', { renderTo: Ext.getBody(), }); &lt...
Ext JS 容器Containers
wangchunbo的博客空间
08-25 4022
Ext JS 容器(Containers)
ExtJs----布局
java
12-14 93
布局概述            在EXT中，所有的布局都是从Ext.Container开始的，Ext.Container的父类是Ext.BoxComponent。Ext.BoxComponent是一个盒子组件，可以定义宽度，高度和位置等属性。作为子类，Ext.Container也继承了这些功能，更重要的是，Ext.Container可以使用layout和items属性未作内部的子组件进行布局。 ...
ext-4.2.1-gpl.7z
04-13
ext-4.2.1-gpl.7z
libzmq.dll 4.2.1 X64 win7
02-11
libzmq.dll 4.2.1版本 X64平台win7 vs2015编译的，使用v140 libzmq\bin\x64\Release\v140
EXT安装包4.2.1-1
03-08
EXT4.2.1EXT4.2.1EXT4.2.1EXT4.2.1EXT4.2.1EXT4.2.1EXT4.2.1EXT4.2.1EXT4.2.1
谈谈Ext JS的组件——容器与布局
weixin_33701251的博客
06-23 147
概述 在页面中，比较棘手的地方就是布局。而要实现布局，就得有能维护布局的容器。可以说，在我试过和使用过的Javascript框架中，Ext JS的布局是做得最棒的一个，而这得益于它强大的容器类和丰富的布局类。在本文将介绍Ext JS的容器组合和布局类。 容器：Ext.container.Container 容器的主要功能是管理其内部的组件，因而在继承Ext.Compone...
ExtJS 4.2心得和总结：布局系统详解（Ext.layout.container）
小硒---代码无疆
12-25 1万+
在ExtJS 4.2中，提供了十几种布局，我们可以在api中看到如下图： 我们可以看到很多，比如Accordion、Border、Column、Fit、Form等。下面我们来看一下具体的用法。 下面是将要用到的html代码： 简单创建Container窗口 Absolute Layout Border Layout Accordion Layout Card Lay
谈谈Ext JS的组件——布局的使用方法
weixin_34033624的博客
06-24 188
概述 在Ext JS中，包含两类布局：组件类布局和容器类布局。由于有些组件是有不同的组件组合而成的，如字段就由标题和输入框构成，他们之间也是存在布局关系的，而这就需要组件类布局来处理组件内自己特有的布局关系。如果我们不定义自己的组件，基本不需要使用到组件布局，知道就行了。本文主要介绍的是容器类布局，因为这个在开发中是必定会使用到的。 注意：在Ext JS中，字段有两层意思...
【翻译】Ext JS 4.2介绍
webdev
04-18 195
原文：Introducing Ext JS 4.2 Ext JS 4.2包含了许多令人兴奋的增强功能和特性。你可能已经在之前的文章中阅读过相关的一些功能和特性了，如Grid组件改进。在这篇文章中，将介绍新的海王星主题和从右到左（RTL）的支持。 海王星 在Ext JS 4.2中，我们很高兴的欢迎海王星作为官方完全支持的主题来到了这个大家庭。终于可以构建具有现代感的应用程序了，具有现代特性的外观对...
ItemsControl中的ItemContainerStyle属性
qq_54901023的博客
06-30 650
ItemsControl中的ItemContainerStyle属性
Ext.container.Container.add(): Cannot add destroyed item 'XXX' to Container 'YYY'
IT猿_Ocean的成长之路
08-18 2027
borderlayout布局；左侧菜单栏点击之后在center部分的tabpanel新增一个标签页，关闭当前标签页，再次点击左侧菜单，发现提示Ext.container.Container.add(): Cannot add destroyed item 'XXX' to Container 'YYY'错误。
Ext.Container类学习
张波的技术积累
07-24 7779
1：基本知识    Base class for any Ext.BoxComponent that may contain other Components. Containers handle the basic behavior of containing items, n
Extjs4 布局 layout 详解
zhanzhibo的专栏
04-09 2434
http://my.oschina.net/jgy/blog/58102 1.Layouts   1)Ext.layout.container.Border       layout : 'border' 表示我们使用了Border布局，这种布局方式称为边界布局，它将页面分隔成为:west,east,south,north,center这五个部分，我们在items里面使用region
Extjs4.2 布局详解—Card布局
热门推荐
前端，请指教
11-24 1万+
您可以使用卡布局来创建自己的自定义向导式屏幕。布局是一个标准的CardLayout，底部有一个工具栏，开发者必须提供实现向导业务逻辑的导航功能（请参阅basic.js中的代码以获取详细信息）。 此布局管理多个子组件, 每个都完全填满父容器, 而每次仅显示一个. 此布局样式多用于向导, 实现标签页布局等等. 此类应该通过`layout:'card' Ext.container.Contai
ext html布局,ext中Layout布局的几种方式
weixin_42505576的博客
06-19 387
ExtJS的布局基类为Ext.layout.ContainerLayout，其它布局都是继承该类。ExtJS的容器组件包含一个layout及layoutConfig配置属性，这两个属性用来指定容器使用的布局及布局的详细配置信息，如果没有指定容器组件的layout则默认会使用ContainerLayout作为布局，该布局只是简单的把元素放到容器中，有的布局需要layoutConfig配置，有的则不需...
ubunntu22.04 ffmpeg-4.2.1安装
最新发布
10-22
要在Ubuntu 22.04上安装FFmpeg-4.2.1，可以按照以下步骤进行操作： 1. 打开终端并更新软件包列表：sudo apt update 2. 安装FFmpeg：sudo apt install ffmpeg 3. 确认安装是否成功：ffmpeg -version 请注意，如果您...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值