本文目錄一覽：
- 1、想用Extjs做一個左右布局的格式
- 2、如何用Extjs進行下面的布局，整體是個panel 內部3個子panel 並且還可以拆分成2部分（如圖）
- 3、EXTJS 邊框怎麼設置
- 4、extjs布局問題，求解！！！
想用Extjs做一個左右布局的格式
下面的示例代碼展示了一個基本的Card布局，布局中並沒有包含form元素，具體情況，還要根據實際情況進行處理：
//Card布局__類似嚮導
Ext.application({
name: ‘HelloExt’,
launch: function () {
var navigate = function (panel, direction) {
var layout = panel.getLayout();
layout[direction]();
Ext.getCmp(‘move-prev’).setDisabled(!layout.getPrev());
Ext.getCmp(‘move-next’).setDisabled(!layout.getNext());
};
Ext.create(‘Ext.panel.Panel’, {
title: ‘Card布局示例’,
width: 300,
height: 202,
layout: ‘card’,
activeItem: 0,
x: 30,
y: 60,
bodyStyle: ‘padding:15px’,
defaults: { border: false },
bbar: [{
id: ‘move-prev’,
text: ‘上一步’,
handler: function (btn) {
navigate(btn.up(“panel”), “prev”);
},
disabled: true
},
‘-‘,
{
id: ‘move-next’,
text: ‘下一步’,
handler: function (btn) {
navigate(btn.up(“panel”), “next”);
}
}],
items: [{
id: ‘card-0’,
html: ‘h1第一步/h1’
},
{
id: ‘card-1’,
html: ‘h1第二步/h1’
},
{
id: ‘card-2’,
html: ‘h1最後一步/h1’
}],
renderTo: Ext.getBody()
});
}
});
如何用Extjs進行下面的布局，整體是個panel 內部3個子panel 並且還可以拆分成2部分（如圖）
簡單來說，就是hbox或column橫向布局，再用vbox縱向布局
代碼如下：
Ext.onReady(function () {
Ext.create(‘Ext.panel.Panel’,{
layout:{
type:’column’
},
default:{
xtype:’panel’
},
border:1,
width:600,
height:400,
padding:10,
items:[{
margin:’30px’,
width:150,
height:290,
layout:’vbox’,
items:[{
width:150,
height:90,
html:’form’
},{
width:150,
height:200,
html:’gridbrPanel’
}]
},{
margin:’30px 30px 30px 0′,
width:150,
height:290,
layout:’vbox’,
items:[{
width:150,
height:90,
html:’form’
},{
width:150,
height:200,
html:’gridbrPanel’
}]
},{
margin:’30px 30px 30px 0′,
width:150,
height:290,
layout:’vbox’,
items:[{
width:150,
height:90,
html:’form’
},{
width:150,
height:200,
html:’gridbrPanel’
}]
}],
renderTo:Ext.getBody()
})
效果如下圖：
EXTJS 邊框怎麼設置
EXTJS中border布局包含多個子面板，是一個面嚮應用的UI風格的布局，它將整個容器分為5個部分，分別是：east（東）、south（南）、west（西）、north（北）、center（中）。加入到容器中的子面板需要指定region配置下來告知容器要加入到那個部分。
1、實例演示：
Ext.onReady(function()
{
Ext.create(‘Ext.panel.Panel’,
{
title: ‘容器面板’,
renderTo: ‘div1’,
width: 450,
height: 300,
layout: ‘border’,
defaults:
{
split: true, //是否有分割線
collapsible: true, //是否可以摺疊
bodyStyle: ‘padding:15px’
},
items: [
{ //子元素的方位：north、west、east、center、south region: ‘north’,
title: ‘北’,
xtype: “panel”,
html: “子元素1”,
height: 70
},
{
region: ‘west’,
title: ‘西’,
xtype: “panel”,
html: “子元素2”,
width: 100
},
{
region: ‘east’,
title: ‘東’,
xtype: “panel”,
html: “子元素2”,
width: 100
},
{
region: ‘center’,
title: ‘主體’,
xtype: “panel”,
html: “子元素3”
},
{
region: ‘south’,
title: ‘南’,
xtype: “panel”,
html: “子元素4”,
height: 70
}
]
});
});
2、運行效果：
extjs布局問題，求解！！！
使用vbox布局方式
layout : {
type : ‘hbox’,
align : ‘center’
}
原創文章，作者：SZMFU，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/317313.html
微信掃一掃 
支付寶掃一掃 