Ext.js4.2.1中Ext.container.Container怎么用

小編給大家分享一下Ext.js4.2.1中Ext.container.Container怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

一：簡(jiǎn)介

任何包含其它組件的組件的基類，容器最基本的操作包括對(duì)其內(nèi)部組件進(jìn)行添加，插入和刪除。

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

可以簡(jiǎn)單的創(chuàng)建一個(gè)容器：

1. // 顯式創(chuàng)建一個(gè)容器
   

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.         // 隱式創(chuàng)建容器通過指定的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

容器類把子組件的渲染任務(wù)賦予給了一個(gè)layout管理類，必須通過一個(gè)layout配置屬性配置到容器當(dāng)中。

當(dāng)為容器添加子item或者動(dòng)態(tài)的添加組件時(shí)，需要考慮如何組織他們的布局和大小。默認(rèn)情況下，容器會(huì)按先后順序進(jìn)行布局。

某些容器允許動(dòng)態(tài)的添加子組件，但是下面的這些容器卻不允許：Ext.layout.container.Card，Ext.layout.container.Anchor，Ext.layout.container.VBox， Ext.layout.container.HBox，
和Ext.layout.container.Table。

layout枚舉值:

1.absolute:  通過坐標(biāo)位置來布局

點(diǎn)擊(此處)折疊或打開

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'//設(shè)置面板體的背景色
    

13.             },
    

14.             items:[{
    

15.                 x:10,//橫坐標(biāo)為距父容器左邊緣10像素的位置
    

16.                 y:10,//縱坐標(biāo)為距父容器上邊緣10像素的位置
    

17.                 html:'子面板一',
    

18.                 title:'子面板一'
    

19.             },{
    

20.                 x:130,//橫坐標(biāo)為距父容器左邊緣130像素的位置
    

21.                 y:40,//縱坐標(biāo)為距父容器上邊緣40像素的位置
    

22.                 html:'子面板二',
    

23.                 title:'子面板二'
    

24.             }]
    

25.     
    

26.         })

2.accorion: 折疊式布局，每次只能有一個(gè)展開

點(diǎn)擊(此處)折疊或打開

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: 根據(jù)容器的相對(duì)位置布局

點(diǎn)擊(此處)折疊或打開

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屬性的容器默認(rèn)的布局方式

點(diǎn)擊(此處)折疊或打開

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:這是一個(gè)支持多層嵌套面板，區(qū)域之間的自動(dòng)形成一個(gè)多窗格，面向應(yīng)用的UI布局風(fēng)格內(nèi)置的展開和折疊區(qū)域。布局將界面分為上下左右中五個(gè)區(qū)域，分別用north、south、west、east、center來表示，它的每個(gè)子項(xiàng)用region指定元素的位置。

點(diǎn)擊(此處)折疊或打開

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的基礎(chǔ)類

7.card:這種布局管理多個(gè)子組件，每個(gè)裝到集裝箱，其中只有一個(gè)子組件可以在任何給定的時(shí)間是可見的。這種布局的樣式是最常用的向?qū)?，?biāo)簽的實(shí)現(xiàn)等

點(diǎn)擊(此處)折疊或打開

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.         });
   

9. 
   

10.         p.getLayout().setActiveItem(0)

8.checkboxgroup: 該種布局的實(shí)現(xiàn)類為Ext.form.CheckboxGroup和Ext.form.RadioGroup

點(diǎn)擊(此處)折疊或打開

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.把整個(gè)容器看成一列,然后向容器放入子元素

點(diǎn)擊(此處)折疊或打開

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: 自定義布局的基礎(chǔ)類

11.fit:Fit Layout 是很常用的一種布局，在Fit布局中，子元素將自動(dòng)填滿整個(gè)父容器。
如果在Fit 布局中放置了多個(gè)組件，則只會(huì)顯示第一個(gè)子元素。典型的案例就是當(dāng)客戶要求一個(gè)window或panel中放置一個(gè)GRID組件，grid組件的大小會(huì)隨著父容器的大小改變而改變。

點(diǎn)擊(此處)折疊或打開

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: 表單布局

點(diǎn)擊(此處)折疊或打開

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:橫向排列跨越容器項(xiàng)目的布局。這種布局劃分可選包含數(shù)字柔性配置的子項(xiàng)之間的可用的水平空間

點(diǎn)擊(此處)折疊或打開

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 將內(nèi)容繪制在table標(biāo)簽中，table的列數(shù)可以指定，還可以通過設(shè)置rowSpan和colSpan來創(chuàng)建復(fù)雜的布局

點(diǎn)擊(此處)折疊或打開

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屬性來設(shè)置對(duì)齊方式，vbox的對(duì)齊方式有：
left : 左對(duì)齊，默認(rèn)對(duì)其方式
center : 中間對(duì)齊
right : 右對(duì)齊
stretch : 以父容器的寬度拉伸對(duì)齊
stretchmax : 以所有子元素中的最大寬度拉伸對(duì)齊

點(diǎn)擊(此處)折疊或打開

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 或者是子組件所在容器的索引)


設(shè)置該屬性的目的是設(shè)置那個(gè)子組件在最初顯示的容器的布局上渲染. 如：activeItem: 'itemId-1' or activeItem: 0 (容器中的第一個(gè)子組件).


適用于一次只能顯示一個(gè)item的布局樣式，如Ext.layout.container.Card 或Ext.layout.container.Fit 


2.anchorSize


錨點(diǎn)的大小


3.autoDestory:Boolean


默認(rèn)為true,表示自動(dòng)銷毀容器內(nèi)的所有子組件


4.defaults


對(duì)所有通過add或insert添加的item設(shè)置統(tǒng)一的屬性。


默認(rèn)屬性將會(huì)應(yīng)用到所有的子組件上，但是不會(huì)覆蓋子組件本身已經(jīng)有的屬性。


如：
用法:  
defaults: { // defaults 將會(huì)應(yīng)用所有的子組件上,而不是父容器  
    autoScroll: true  
},  
items: [  
    // panel1 已經(jīng)存在 autoScroll: false 所以 defaults將不會(huì)應(yīng)用  
    {  
        xtype: 'panel',  
        id: 'panel1',  
        autoScroll: false  
    },  
    // panel2 將會(huì) autoScroll: true  
    new Ext.panel.Panel({  
        id: 'panel2'  
    })  
]  


5.items


單個(gè)組件,或者是以數(shù)組形式定義的子組件集合 將會(huì)自動(dòng)添加到容器中去


如果開發(fā)者沒有配置layout屬性， 默認(rèn)是按順序?qū)⒆咏M件渲染到在容器中，


不考慮子組件的大小和定位。


如果子組件是指定的,它的實(shí)際組件的類型將根據(jù)xtype選項(xiàng)進(jìn)行實(shí)例化. 每個(gè)組件都有各自的xtype.


如果沒有指定 xtype, 那么將會(huì)使用 defaultType，默認(rèn)是panel.


不要定義contentEl 或者 html作為子組件

以上是“Ext.js4.2.1中Ext.container.Container怎么用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！