Sencha Touch快速入門2.0之Card布局是本文要介紹的內容，繼續(xù) Sencha Touch快速入門2.0之Box布局 來介紹Sencha Touch的Card布局。在這篇里面，我就盡量少說廢話了，如果有什么不清楚的地方，請看前面的章節(jié)。

一、Fit布局

Fit布局很有特點，它只允許自己的***個item被顯示出來，并且填充滿自己。如果它的item多于一個，那難免是會出些意外的情況的。

如果你發(fā)現(xiàn)你的容器內的控件有的沒有全部被顯示出來，那不妨看看它的layout是否為fit，試著將它強制設為vbox往往就能解決問題。

下圖是在一個layout為fit的Panel里放了三個button的結果：

所以說：除非你想營造些令人匪夷所思的效果，請不要在fit布局的容器里面放超過一個的東西。

二、Card布局

Sencha Touch 中，Card布局繼承Fit布局。算是用得比較多的一個布局了，許多的界面切換都需要這個布局的Panel的參與。Sencha Touch中使用Card布局的有：TabPanel、Carousel。

該布局會包含多個子面板，任何時候都只有一個子面板處于顯示狀態(tài)，該布局的重點方法是setActiveItem，

讓我們看看官方文檔是怎么寫的

Component對象：Sencha Touch里所有可視控件都是由Component派生的。

***個參數(shù)可以是:

1、一個數(shù)字 比如說1代表激活容器里items[1]，即第二個item。

2、一個字符串 這個字符串是一個Component對象的id。

3、一個Component對象 如果你傳入的Component對象不在容器的items中，則框架會自動將其添加至items，并設置為活動的item。

第二個參數(shù)可以是：

1、一個字符串 這個字符串代表動畫效果 可選的有 slide pop fade flip cube等

2、一個動畫對象 可以對動畫效果進行更多的配置。如{type: 'slide', direction : 'right'} 如果想要做出更漂亮的動畫效果，請參看官方文檔 anim 類。

下面看一個例子：

card布局 

var myApp = new Ext.Application({      
name: 'myApp',      
launch: function () {          
        var myPanel1 = new Ext.Panel({              
          id: 'myPanel1',              
          layout: 'vbox',              
          html: 'Oh, this is Panel1!',              
      items: {     
         xtype: 'button',                  
         text: '前往Panel2',                      
         handler: function(){                      
           myApp.views.mainPanel.setActiveItem(    //設置活動項的方法                          
           'myPanel2',                    //***個參數(shù)為mypanel2的id 在這里也可以填數(shù)字 ‘1’    
           'slide'                        //這個參數(shù)為切換效果                      
          );                  
        }              
      }          
   });                  
  var myPanel2 = new Ext.Panel({              
       id: 'myPanel2',              
       layout: 'vbox',              
       html:  'This is Panel2!',              
     items: {                  
        xtype: 'button',                  
        text: '前往Panel3',                  
        handler: function(){                     
                var pnl = new Ext.Panel({                         
                  html:'這個是點擊按鈕之后才創(chuàng)建的Panel,演示到此結束'                      
      });    
       myApp.views.mainPanel.setActiveItem(             
                    pnl,{            //這里參數(shù)是剛創(chuàng)建的panel                          
                    type: 'slide',    //這里動畫效果為一個動畫效果對象                         
                     direction: 'right'                     
                    });                 
                 }            
               }          
        });                  
      myApp.views.mainPanel = new Ext.Panel({       
             fullscreen: true,              
             layout: 'card',             
              items: [myPanel1, myPanel2]    //***個為默認界面          
           });      
     }}); 

這個例子演示了如何使用card布局進行畫面的切換，當然，實際使用的時候，碰到更多的問題是無法避免的，本篇文章也無法為大家一一解答。如果大家有什么共性的問題，歡迎提出來探討。

ps：因為TabPanel、Carousel本身都是Card布局，因此，我們也可以調用它的setActiveItem()來改變當前顯示的內容。

小結：Sencha Touch快速入門2.0之Card布局的內容介紹完了，希望通過本文的學習能對你有所幫助！