Extjs4布局详解(四)—Card布局

Card布局：这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交。

Card布局：这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交。Card布局可以使用layout:'card'来创建。注意：由于此布局本身不提供分步导航功能，所以需要用户自己开发该功能。由于只有一个面板处于显示状态，那么在初始时，我们可以使用setActiveItem功能来指定某一个面板的显示。当要显示下一个面板或者上一个面板的时候，我们可以使用getNext()或getPrev()来得到下一个或上一个面板。然后使用setDisabled方法来设置面板的显示。另外，如果面板中显示的是FORM布局，我们在点击下一个面板的时候，处理FORM中提交的元素，通过AJAX将表单中的内容保存到数据库中或者SESSION中。

下面的示例代码展示了一个基本的Card布局，布局中并没有包含form元素，具体情况，还要根据实际情况进行处理：

 

1. var navigate = function(panel, direction){     
2.         var layout = panel.getLayout();    
3.         layout[direction]();     
4.         Ext.getCmp('move-prev').setDisabled(!layout.getPrev());     
5.         Ext.getCmp('move-next').setDisabled(!layout.getNext());
6.     }; 
7.     Ext.create('Ext.panel.Panel', {    
8.         title: 'MHZG.NET-Card布局示例',    
9.         width: 300,     
10.         height: 202,    
11.         layout: 'card',     
12.         activeItem: 0,
13.         x:30,
14.         y:60,
15.         bodyStyle: 'padding:15px',    
16.         defaults: {border: false},
17.         bbar: [{            
18.             id: 'move-prev',            
19.             text: 'Back',             
20.             handler: function(btn) {
21.                 navigate(btn.up("panel"), "prev");            
22.             },
23.             disabled: true
24.         },
25.         '->',
26.         {
27.             id: 'move-next',            
28.             text: 'Next',             
29.             handler: function(btn) {
30.                 navigate(btn.up("panel"), "next");
31.             }
32.         }],
33.         items: [{
34.             id: 'card-0',
35.             html: '<h1>Welcome to the Wizard!</h1><p>Step 1 of 3</p>'     
36.         },
37.         {
38.             id: 'card-1',
39.             html: '<p>Step 2 of 3</p>'
40.         },
41.         {
42.             id: 'card-2',
43.             html: '<h1>Congratulations!</h1><p>Step 3 of 3 - Complete</p>'     
44.         }],    
45.         renderTo: Ext.getBody()
46.     });

效果图：