免費(fèi)AI編程助手
Ext.js card_wizard布局
2022-05-19 16:24 更新
描述
這種布局用來(lái)管理多個(gè)子組件，并且在任何時(shí)刻只能顯示一個(gè)子組件。這種布局最常用的情況是向?qū)Ｊ?，也就是我們所說(shuō)的分布提交。
語(yǔ)法
這里是使用卡向?qū)Р季值暮?jiǎn)單語(yǔ)法
layout: 'card'
注意：
由于此布局本身不提供分步導(dǎo)航功能，所以需要用戶自己開(kāi)發(fā)該功能。由于只有一個(gè)面板處于顯示狀態(tài)，那么在初始時(shí)，我們可以使用setActiveItem功能來(lái)指定某一個(gè)面板的顯示。當(dāng)要顯示下一個(gè)面板或者上一個(gè)面板的時(shí)候，我們可以使用getNext()或getPrev()來(lái)得到下一個(gè)或上一個(gè)面板。然后使用setDisabled方法來(lái)設(shè)置面板的顯示。另外，如果面板中顯示的是FORM布局，我們?cè)邳c(diǎn)擊下一個(gè)面板的時(shí)候，處理FORM中提交的元素，通過(guò)AJAX將表單中的內(nèi)容保存到數(shù)據(jù)庫(kù)中或者SESSION中。
例
下面的示例代碼展示了一個(gè)基本的Card布局
<!DOCTYPE html>
<html>
<head>
<link href="./ext-6.0.0/build/classic/theme-classic/resources/theme-classic-all.css" rel="stylesheet">
<script src="./ext-6.0.0/build/ext-all.js"></script>
<script type="text/javascript">
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()
});
}
});
</script>
</head>
<body>
</body>
</html>運(yùn)行結(jié)果：
以上內(nèi)容是否對(duì)您有幫助：
更多建議：