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

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

一：簡介

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

最常用的容器類包含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.         });
   

9. 
   

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作為子組件

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