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