ExtJS专题（十）:layout布局的使用（4）

像安装向导一样，一张一张显示 

图像显示：

1. Ext.onReady(function() {  
2.   
3.         var i = 0;  
4.   
5.         var navHandler = function(direction) {  
6.             if (direction == -1) {  
7.                 i--;  
8.                 if (i < 0) { i = 0; }  
9.             }  
10.   
11.             if (direction == 1) {  
12.                 i++;  
13.                 if (i > 2) { i = 2; return false; }  
14.             }  
15.   
16.   
17.             var btnNext = Ext.get("move-next").dom.document.getElementsByTagName("button")[1];  
18.             var btnBack = Ext.get("move-next").dom.document.getElementsByTagName("button")[0];  
19.   
20.             if (i == 0) {  
21.                 btnBack.disabled = true;  
22.             }  
23.             else {  
24.                 btnBack.disabled = false;  
25.             }  
26.   
27.             if (i == 2) {  
28.                 btnNext.value = "完成";  
29.                 btnNext.disabled = true;  
30.             }  
31.             else {  
32.                 btnNext.value = "下一步";  
33.                 btnNext.disabled = false;  
34.             }  
35.   
36.             card.getLayout().setActiveItem(i);  
37.   
38.         };  
39.   
40.   
41.         var card = new Ext.Panel({  
42.              200,  
43.             height: 200,  
44.             title: '注册向导',  
45.             layout: 'card',  
46.             activeItem: 0, // make sure the active item is set on the container config!  
47.             bodyStyle: 'padding:15px',  
48.             defaults: {  
49.                 border: false  
50.             },  
51.             bbar: [  
52.                 {  
53.                     id: 'move-prev',  
54.                     text: '上一步',  
55.                     handler: navHandler.createDelegate(this, [-1])                      
56.                 },  
57.                 '->',  
58.                 {  
59.                     id: 'move-next',  
60.                     text: '下一步',  
61.                     handler: navHandler.createDelegate(this, [1])  
62.                 }  
63.             ],  
64.   
65.             items: [{  
66.                 id: 'card-0',  
67.                 html: '<h1>欢迎来到注册向导!</h1><p>Step 1 of 3</p>'  
68.             }, {  
69.                 id: 'card-1',  
70.                 html: '<h1>请填写注册资料!</h1><p>Step 2 of 3</p>'  
71.             }, {  
72.                 id: 'card-2',  
73.                 html: '<h1>注册成功!</h1><p>Step 3 of 3 - Complete</p>'  
74. }],  
75.   
76.                 renderTo: "container"  
77.             });  
78.   
79.   
80.   
81.         });