想用Extjs做一个左右布局的格式

2025-05-14 14:01:55

推荐回答（3个）

回答1：

下面的示例代码展示了一个基本的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: '

第一步

'
},
{
id: 'card-1',
html: '

第二步

'
},
{
id: 'card-2',
html: '

最后一步

'
}],
renderTo: Ext.getBody()
});
}
});

回答2：

左边region:west，调整一下高度宽度，
右边region:center，调整一下高度宽度，这样就可以了

回答3：

如果是form或者panel可使用column布局处理，
如果是整体页面的处理可使用panel的region:west和center布局处理。