Fit自適應布局

使唯一的子元素充滿父容器,如果父容器有兩個或多個子元素,那么只顯示第一個子元素(前提是沒有設置 autoScroll: true屬性)

Accordion布局(折疊布局)

代碼:

??????????????? Ext.create('Ext.panel.Panel', {
??????????????? title: 'Accordion Layout',
??????????????? width: 300,
??????????????? height: 300,
??????????????? layout: 'accordion',???????? //設置為折疊布局
??????????????? defaults: {
??????????????????? // 應用于每個panel
??????????????????? bodyStyle: 'padding:15px'
??????????????? },
??????????????? layoutConfig: {
??????????????????
??????????????????? titleCollapse: false,
??????????????????? animate: true,
??????????????????? activeOnTop: true
??????????????? },
??????????????? items: [{
??????????????????? title: 'Panel 1',
??????????????????? html: 'Panel content!'
??????????????? }, {
??????????????????? title: 'Panel 2',
??????????????????? html: 'Panel content!'
??????????????? }, {
??????????????????? title: 'Panel 3',
??????????????????? html: 'Panel content!'
??????????????? }],
??????????????? renderTo: Ext.getBody()
??????????? });

Card布局(卡片式布局)

點擊 next

代碼:

var panel = Ext.create('Ext.panel.Panel', {
??????????????? title: 'Example Wizard',
??????????????? width: 300,
??????????????? height: 200,
??????????????? layout: 'card',???? //設置panel的布局方式為 卡片式布局
??????????????? activeItem: 0, // 默認顯示第一頁
??????????????? bodyStyle: 'padding:15px',
??????????????? defaults: {
??????????????????? // 應用于每個面板
??????????????????? border: false
??????????????? },
??????????????? // 導航按鈕
??????????????? bbar: [??? //定義底部工具欄, 不寫xtype,默認是 button
??????? {
??????????? id: 'prev',
??????????? text: 'Back',
??????????? handler: navHandler

??????? },
??????? '->',
??????? {
??????????? id: 'next',
??????????? text: 'Next',
??????????? handler: navHandler
??????? }],
??????????????? // 定義輪換的頁面
??????????????? items: [{
??????????????????? id: 'card-0',??? //為了給setActiveItem()提供索引到哪個頁面
??????????????????? html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'
??????????????? }, {
??????????????????? id: 'card-1',
??????????????????? html: '<p>Step 2 of 3</p>'
??????????????? }, {
??????????????????? id: 'card-2',
??????????????????? html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'
??????????????? }],
??????????????? renderTo: Ext.getBody()
??????????? });
??????????? function navHandler(btn) {
??????????????? var index = Number(panel.layout.activeItem.id.substring(5));

??????????????? if (btn.text == 'Back') {
??????????????????? index -= 1;
??????????????????? if (index < 0) {
??????????????????????? index = 0;
??????????????????? }
??????????????????? else {
??????????????????????? btn.enable = true; ;
??????????????????? }

??????????????? }
??????????????? else {
??????????????????? index += 1;
??????????????????? if (index > 3) {
??????????????????????? index = 3;
??????????????????? }

??????????????? }

??????????????? panel.layout.setActiveItem('card-' + index);
??????????? }

Anchor錨點布局

分為三種,

1.百分比布局

2.偏移值布局

?

下面看三種布局樣式

從左至右 分別為 1百分比布局,2偏移值布局

?

代碼: 切換顯示格式,只需修改items內的 anchor值即可

Ext.create('Ext.panel.Panel', {

??? title: 'header',
??? tbar: ['頂部工具欄'],
??? bbar: ['底部工具欄'],
??? height: 400,
??? width: 300,
??? frame: true,
??? renderTo: document.body,
??? bodyPadding: 5,
??? layout: 'anchor',
??? bodyStyle: 'background-color:#fff',
??? defaults: {//設置默認屬性
??????? // autoScroll: true,???? //自動滾動條
??????? collapsible: true?? //收縮拉伸按鈕

??? },
??? //? autoScroll: true,???? //自動滾動條
??? collapsible: true,?? //收縮拉伸按鈕

??? items: [{

??????? title: 'son panel1',
??????? //anchor:'30% 80%'?? //第一個百分比是 寬度 ,第二個是高度
??????? anchor:'-100 -100'?? // 設置子面板 相對于父面板 右下邊的偏移值
????

??? }

??? ]

})

Absolute絕對定位布局

代碼:

Ext.create('Ext.panel.Panel', {

?????????????? title: 'header',
?????????????? tbar: ['頂部工具欄'],
?????????????? bbar: ['底部工具欄'],
?????????????? height: 400,
?????????????? width: 300,
?????????????? frame: true,
?????????????? renderTo: document.body,
?????????????? bodyPadding: 5,
?????????????? layout: 'absolute',
?????????????? bodyStyle: 'background-color:#fff',
?????????????? defaults: {//設置默認屬性
?????????????????? // autoScroll: true,???? //自動滾動條
?????????????????? collapsible: true,?? //收縮拉伸按鈕
?????????????????? height: 50,
?????????????????? width: 100
?????????????? },
?????????????? //? autoScroll: true,???? //自動滾動條
?????????????? collapsible: true,?? //收縮拉伸按鈕

?????????????? items: [{

?????????????????? title: 'son panel1',
?????????????????? x: 20,?? //設置相對父容器 左邊緣的距離值
?????????????????? y: 30??? //這只相對父容器 上面元的距離值

?????????????? },
?????????????? {
?????????????????? title: 'son panel2',
?????????????????? x: 150,?? //設置相對父容器 左邊緣的距離值
?????????????????? y: 90?
?????????????? }

?????????????? ]

?????????? })

Column列布局

意思就是 把容器 按指定列寬分割,來顯示子元素,高度自適應,也可設置

列分割也分為兩種形式: 估計寬度分割,百分比分割,下面示例演示兩種形式

代碼:

Ext.create('Ext.panel.Panel', {

??????????????? title: 'header',
??????????????? tbar: ['頂部工具欄'],
??????????????? bbar: ['底部工具欄'],
??????????????? height: 400,
??????????????? width: 300,
??????????????? frame: true,
??????????????? renderTo: document.body,
??????????????? bodyPadding: 5,
??????????????? layout: 'column',
??????????????? bodyStyle: 'background-color:#fff',
??????????????? defaults: {//設置默認屬性
??????????????????? // autoScroll: true,???? //自動滾動條
??????????????????? collapsible: true,?? //收縮拉伸按鈕
??????????????????? height: 50
????????????????? //? width: 100
??????????????? },
??????????????? //? autoScroll: true,???? //自動滾動條
??????????????? collapsible: true,?? //收縮拉伸按鈕

??????????????? items: [{

????????????????? title:'son1',
????????????????? width:100

??????????????? },
??????????????? {
????????????????? title:'son2',
????????????????? columnWidth:.3??
????????????????? /*設置剩余寬度的30%,為什么說剩余寬度呢,那么就是
?????????????????? 列布局是默認 固定布局寬度優先計算,百分比寬度的
?????????????????? 算法是 總寬度減去固定寬度剩下的在做百分比分割
?????????????????? */
??????????????? },
??????????????? {
??????????????? title:'son3',
??????????????? columnWidth: .7
??????????????? }

??????????????? ]

??????????? })

?

table表格布局

雖然稱之為表格布局,但是 很清楚的看到 Div的存在,毫無table標記.

代碼如下:

Ext.create('Ext.panel.Panel', {

????????????? title: 'header',
????????????? tbar: ['頂部工具欄'],
????????????? bbar: ['底部工具欄'],
????????????? height: 300,
????????????? width: 300,
????????????? frame: true,
????????????? renderTo: document.body,
????????????? bodyPadding: 5,
????????????? layout: { type: 'table', columns: 2 },
????????????? bodyStyle: 'background-color:#fff',
????????????? defaults: {//設置默認屬性
????????????????? // autoScroll: true,???? //自動滾動條
????????????????? collapsible: true,?? //收縮拉伸按鈕
????????????????? height: 50,
????????????????? width: 120
????????????? },
????????????? //? autoScroll: true,???? //自動滾動條
????????????? collapsible: true,?? //收縮拉伸按鈕

????????????? items: [{

????????????????? title: 'son1',
????????????????? width: 280,?????? //設置寬度
????????????????? colspan: 2??????? //跨兩列

????????????? },
????????????? {
????????????????? title: 'son2',
????????????????? width: 150,
????????????????? rowspan: 2?????? //跨兩行

????????????? },
????????????? {
????????????????? title: 'son3'

????????????? }

????????????? ]

????????? })

box盒布局

主要用的屬性就是 flex用來決定占父容器的百分比

代碼如下:

Ext.create('Ext.panel.Panel', {

?????????????? title: 'header',
?????????????? tbar: ['頂部工具欄'],
?????????????? bbar: ['底部工具欄'],
?????????????? height: 200,
?????????????? width: 300,
?????????????? frame: true,
?????????????? renderTo: document.body,
?????????????? bodyPadding: 5,
?????????????? layout: 'fit',
?????????????? bodyStyle: 'background-color:#fff',
?????????????? layout:{
?????????????? type:'hbox',?? //水平盒布局
?????????????? align:'stretch'?? //子面板高度充滿父容器
?????????????? },
?????????????? defaults: {//設置默認屬性
?????????????????? // autoScroll: true,???? //自動滾動條
?????????????????? collapsible: true?? //收縮拉伸按鈕

?????????????? },
?????????????? //? autoScroll: true,???? //自動滾動條
?????????????? collapsible: true,?? //收縮拉伸按鈕

?????????????? items: [{

?????????????????? title: 'son panel1',
??????????????????
?????????????????? flex:1????????????????????? //五分之一

?????????????? },
?????????????? {
?????????????????? title: 'son panel2',
?????????????????? flex:4?????????????????? //五分之四

?????????????? }

?????????????? ]

?????????? })

?

ViewPort布局

結合 邊框布局使用:

個人感覺:還是 這種簡單易用,方便

代碼:

Ext.create('Ext.panel.Panel', {

?????????????? title: 'header',
?????????????? tbar: ['頂部工具欄'],
?????????????? bbar: ['底部工具欄'],
?????????????? height: 200,
?????????????? width: 300,
?????????????? frame: true,
?????????????? renderTo: document.body,
?????????????? bodyPadding: 5,
?????????????? layout: 'fit',
?????????????? bodyStyle: 'background-color:#fff',
?????????????? layout: {
?????????????????? type: 'border',?? //水平盒布局
?????????????????
?????????????? },
?????????????? defaults: {//設置默認屬性
?????????????????? // autoScroll: true,???? //自動滾動條
?????????????????? collapsible: true?? //收縮拉伸按鈕

?????????????? },
?????????????? //? autoScroll: true,???? //自動滾動條
?????????????? collapsible: true,?? //收縮拉伸按鈕

?????????????? items: [{

?????????????????? title: 'son panel1',

?????????????????? region:'north',
?????????????????? height:60

?????????????? },
?????????????? {
?????????????????? title: 'son panel2',
????????????????? region:'west',
????????????????? width:100

?????????????? },
?????????????? {
?????????????????? title:'son panel3',
?????????????????? region:'center'
??????????????????
?????????????? }

?????????????? ]

?????????? })

轉載于:https://www.cnblogs.com/Mr-Joe/archive/2012/02/24/2366025.html

總結

以上是生活随笔為你收集整理的ExtJS之 标准布局类(针对于panel)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。