標準佈局類(11中佈局類)
<div class="box">
<div id="myAuto" class="w_320">
<h2>自動佈局類</h2>
</div>
<div id="myFit" class="w_320">
<h2>Fit自適應佈局</h2>
</div>
<div id="myAccordion" class="w_320">
<h2>Accordion摺疊佈局</h2>
</div>
<div id="myCard" class="w_320">
<h2>Card卡片式佈局</h2>
</div>
<div id="percenAnchor" class="w_320">
<h2>錨點佈局百分比定位1</h2>
</div>
<div id="offsetsAnchor" class="w_320">
<h2>錨點佈局偏移值定位2</h2>
</div>
<div id="sidesAnchor" class="w_320">
<h2>錨點佈局參考線定位3</h2>
</div>
<div id="myAbsolute" class="w_320">
<h2>Absolute絕對位置的佈局</h2>
</div>
<div id="myCheckboxGroup" class="w_320">
<h2>複選框佈局</h2>
</div>
<div id="myColumnWidth" class="w_320">
<h2>Column列布局1:固定列寬</h2>
</div>
<div id="myColumnBaiWidth" class="w_320">
<h2>Column列布局2:百分比列寬</h2>
</div>
<div id="myColumn" class="w_320">
<h2>Column列布局2:固定百分比結合使用</h2>
</div>
<div id="myTable" class="w_320">
<h2>表格佈局</h2>
</div>
<div id="myBorder" class="w_320">
<h2>邊框佈局</h2>
</div>
<div id="myBox" class="w_320">
<h2>盒子佈局</h2>
</div>
</div>
<!--CSS樣式文件-->
<style>
.box { padding:50px 0 0 50px; }
* { padding:0; margin:0; }
.w_320 { width:320px; float:left; }
.my-foo-trigger { border-radius:5px; }
.aaa { background:red; }
</style>
Ext.onReady(function(){
//標準佈局類(11中佈局類)
//若是直接在面板上添加內容會很凌亂,若是劃分不一樣的區域,在區域中添加內容將會很整潔,就要用到佈局類
//1.Auto佈局類(Ext.layout.container.Auto)(默認方式)
Ext.create('Ext.panel.Panel',{
title : '默認Auto佈局類',
width : 250,
height : 200,
renderTo : 'myAuto',
frame : true,
bodyPadding : 5,
layout : 'auto',//自動佈局
defaults : {
bodyStyle : 'background-color:#ffffff'
},
//items配置項默認的xtype類型爲panel,能夠經過defaultType配置項進行更改
items : [{
title : '面板一',
html : '面板一'
},{
title : '面板二',
html : '面板二'
}]
});
//2.Fit自適應佈局(使惟一的子元素充滿容器,只顯示一個面板,第二個面板並不會顯示)
Ext.create('Ext.panel.Panel',{
title : 'Fit自適應佈局',
width : 250,
height : 200,
renderTo : 'myFit',
frame : true,
layout : 'fit',//使惟一的子元素充滿容器,只顯示一個面板,第二個面板並不會顯示
defaults : {
bodyStyle : 'background-color:#ffffff;'
},
items : [{
title : '面板一',
html : '面板一'
},{
title : '面板二',
html : '面板二'
}]
});
//3.Accordion摺疊佈局(任什麼時候候都只有一個自面板處於打開狀態)
//製做分組內容或者分組菜單
Ext.create('Ext.panel.Panel',{
title : 'Accordion摺疊佈局',
width : 250,
height : 200,
renderTo : 'myAccordion',
frame : true,
bodyPadding : 5,
layout : 'accordion',
defaults : {
bodyStyle : 'padding:15px;background-color:#ffffff'
},
items : [{
title : '面板一',
html : '面板一'
},{
title : '面板二',
html : '面板二'
},{
title : '面板三',
html : '面板三'
}]
});
//4.Card卡片式佈局(用於嚮導或者標籤頁)
//任什麼時候候只有一個自面板處於顯示狀態
var myCard = Ext.create('Ext.panel.Panel',{
title : 'Card卡片式佈局',
width : 250,
height : 200,
renderTo : 'myCard',
frame :true,
layout : 'card',//
activeItem : 0,//設置默認顯示第一個子面板
bodyPadding : 5,
defaults : {
bodyStyle : 'padding:15px; background-color:#ffffff'
},
items : [{
title : '嵌套面板一',
html : '說明一',
id : 'p1'
},{
title : '嵌套面板二',
html : '說明二',
id : 'p2'
},{
title : '嵌套面板三',
html : '說明三',
id : 'p3'
}],
buttons : [{
text : '上一頁',
handler : changePage
},{
text : '下一頁',
handler : changePage
}]
});
//觸發函數
function changePage(btn){
var index = Number(myCard.layout.activeItem.id.substring(1));
console.info(index);
if(btn.text == '上一頁'){
index -= 1;
if(index < 1){
index = 1;
}
}else {
index += 1;
if(index > 3){
index = 3;
}
}
myCard.layout.setActiveItem('p'+index);
}
//5.Anchor錨點佈局
//（1）百分比定位，（2）偏移值定位，（1）參考線定位
//5.1百分比定位
Ext.create('Ext.panel.Panel',{
title : '百分比定位',
width : 250,
height :200,
renderTo : 'percenAnchor',
frame : false,//渲染面板
layout : 'anchor',
defaults : {
bodyStyle : 'padding:15px; background-color:#ffffff'
},
items : [{
title : '子面板',
anchor : '50% 50%'
}]
});
//5.2 offsetsAnchor偏移值定位
Ext.create('Ext.panel.Panel',{
title : '偏移值定位',
width : 250,
height : 150,
renderTo : 'offsetsAnchor',
frame : false,//
layout : 'anchor',
defaults : {
bodyStyle : 'padding:15px; background-color:#ffffff'
},
items : [{
title : '子面板',
anchor : '-10 -10'//寬高偏移父元素10像素
}]
});
//5.3 sidesAnchor參考線定位
Ext.create('Ext.panel.Panel',{
title : '參考線定位',
width : 250,
height : 150,
renderTo : 'sidesAnchor',
frame : false,
layout : 'anchor',
autoScroll : true,
defaults : {
bodyStyle : 'padding:15px; background-color:#ffffff'
},
items : [{
title : '子面板',
width : 200,
height : 100,
anchor : 'r b',//相對於父容器的右邊和底邊的差值進行定位
html : '說明'
}]
});
//6. Absolute絕對位置的佈局
Ext.create('Ext.panel.Panel',{
title : '',
width : 250,
height : 150,
renderTo : 'myAbsolute',
frame : false,
layout : 'absolute',
defaults : {
width : 100,
height : 70,
frame : true,
bodyStyle : 'padding:5px; background-color:#ffffff'
},
items : [{
title : '面板一',
x : 10,//橫座標距離父元素組編10像素
y : 10,//縱座標距離父元素組編10像素，
html : '面板一的內容'
},{
title : '面板二',
x : 130,//橫座標距離父元素組編10像素
y : 40,//縱座標距離父元素組編10像素，
html : '面板二的內容'
}]
});
//7. myCheckboxGroup複選框佈局
Ext.create('Ext.panel.Panel',{
title : '複選框佈局',
width : 250,
height : 150,
renderTo : 'myCheckboxGroup',
frame : true,
bodyPadding : 5,
defaults : {
width : 240,
labelWidth : 40,
labelSeparator : ': '
},
items : [{
fieldLabel : '愛好',
xtype : 'checkboxgroup',
columns : 3,
items : [{
name : 'love',
boxLabel : '游泳',
inputValue : 'swim'
},{
name : 'love',
boxLabel : '遊戲',
inputValue : 'game'
},{
name : 'love',
boxLabel : '遊戲',
inputValue : 'game'
},{
name : 'love',
boxLabel : '遊戲',
inputValue : 'game'
},{
name : 'love',
boxLabel : '遊戲',
inputValue : 'game'
}]
}]
});
//8. Column列布局
//全部的columnWidth值相加必須等於1或者100%
//8.1 指定固定列寬
Ext.create('Ext.panel.Panel',{
title : 'Column列布局 指定固定列寬',
width : 250,
height : 150,
frame : true,
renderTo : 'myColumnWidth',
layout : 'column',
defaults : {
height : 100,
frame : true,
bodyStyle : 'background-color:#ffffff'
},
items : [{
title : '子面板一',
width : 100, //指定列寬100像素
html : '列寬100像素'
},{
title : '子面板二',
width : 100, //指定列寬100像素
html : '列寬100像素'
}]
});
//8.2 百分比列寬
Ext.create('Ext.panel.Panel',{
title : 'Column列布局 百分比列寬',
width : 250,
height : 150,
frame : true,
renderTo :'myColumnBaiWidth',
layout : 'column',
defaults : {
height : 100,
frame : true,
bodyStyle : 'background-color:#ffffff'
},
items : [{
title : '子面板一',
columnWidth : 0.3 ,//百分比寬度30%
html : '列寬<span style="color:red">30%</span>'
},{
title : '子面板二',
columnWidth : 0.7, //百分比寬度70%
html : '列寬<span style="color:red">70%</span>'
}]
});
//8.3 固定百分比結合使用
Ext.create('Ext.panel.Panel',{
title : '固定百分比結合使用',
width : 250,
height : 150,
frame : true,
renderTo :'myColumn',
layout : 'column',
defaults : {
height : 100,
frame : true,
bodyStyle : 'background-color:#ffffff'
},
items : [{
title : '子面板一',
idth : 100 ,//指定寬度100
html : '列寬<span style="color:red">指定寬度100</span>'
},{
title : '子面板二',
columnWidth : 0.3, //百分比寬度30%
html : '列寬<span style="color:red">30%</span>'
},{
title : '子面板三',
columnWidth : 0.7, //百分比寬度70%
html : '列寬<span style="color:red">70%</span>'
}]
});
//9. Table表格佈局
Ext.create('Ext.panel.Panel',{
title : 'Table表格佈局',
width : 250,
heigh : 150,
frame : true,
renderTo : 'myTable',
layout : {
type : 'table',//表格佈局
columns : 4//設置默認4列
},
defaults : {
width : 50,
height : 50,
frame : true,
bodyStyle : 'bakcground-color : #ffffff'
},
items : [{
title : '面板一',
width : 150,
colspan : 3//設置跨3列
},{
title : '面板二',
height : 100,
rowspan : 2//跨2行
},{
title : '面板三'
},{
title : '面板四'
},{
title : '面板五'
}]
});
//10. Border邊框佈局(面向應用的UI風格的佈局)
Ext.create('Ext.panel.Panel',{
title : 'Border邊框佈局',
width : 250,
height : 200,
frame : true,
renderTo : 'myBorder',
layout : 'border',
defaults : {
collapsible : true
},
items : [{
title : '北部面板',
region : 'north' ,//指定區域north
height : 50,
html : '頭部'
},{
title : '南部面板' ,
region : 'south',
height : 50,
html : '底部'
},{
title : '西部面板',
region : 'west',
width : 50,
html : '左邊'
},{
title : '東部面板',
region : 'east',
width : 50,
html : '右邊'
},{
title : '主要內容',
region : 'center',//這個必須有
html : '中間區域不能缺乏'
}]
});
//11. Box盒佈局
//水平盒、垂直盒
Ext.create('Ext.panel.Panel',{
title : '盒子佈局',
width : 300,
height : 150,
frame : true,
renderTo : 'myBox',
layout : {
type : 'hbox',
align : 'stretch'//子面板高度充滿父容器
},
items : [{
title : '子面板一',
flex : 1,
html : '1/4寬一'
},{
title : '子面板二',
flex : 1,
html : '1/4寬二'
},{
title : '子面板三',
flex : 2,
html : '1/2寬三'
}]
});
});
相關文章
- 1. CSS佈局標準
- 2. 佈局類Widget 彈性佈局Flex
- 3. 浮動標準佈局
- 4. 標準Go項目佈局
- 5. 佈局屏幕分類
- 6. 網頁佈局分類
- 7. Flutter之佈局類Widget
- 8. WPF佈局-面板類（二）
- 9. WPF佈局-面板類（三）
- 10. html+css佈局類型
- 更多相關文章...
- • ASP.NET Web Pages - 頁面佈局 - ASP.NET 教程
- • ASP.NET MVC - 樣式和佈局 - ASP.NET 教程
- • Kotlin學習（二）基本類型
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. CSS佈局標準
- 2. 佈局類Widget 彈性佈局Flex
- 3. 浮動標準佈局
- 4. 標準Go項目佈局
- 5. 佈局屏幕分類
- 6. 網頁佈局分類
- 7. Flutter之佈局類Widget
- 8. WPF佈局-面板類（二）
- 9. WPF佈局-面板類（三）
- 10. html+css佈局類型