包含extjs42首页布局实例的词条
更新：本文目录一览：
- 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'
}
