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

一、Fit布局

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

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

下圖是在一個(gè)layout為fit的Panel里放了三個(gè)button的結(jié)果：

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

二、Card布局

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

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

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

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

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

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

2、一個(gè)字符串 這個(gè)字符串是一個(gè)Component對(duì)象的id。

3、一個(gè)Component對(duì)象 如果你傳入的Component對(duì)象不在容器的items中，則框架會(huì)自動(dòng)將其添加至items，并設(shè)置為活動(dòng)的item。

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

1、一個(gè)字符串 這個(gè)字符串代表動(dòng)畫效果 可選的有 slide pop fade flip cube等

2、一個(gè)動(dòng)畫對(duì)象 可以對(duì)動(dòng)畫效果進(jìn)行更多的配置。如{type: 'slide', direction : 'right'} 如果想要做出更漂亮的動(dòng)畫效果，請(qǐng)參看官方文檔 anim 類。

下面看一個(gè)例子：

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(    //設(shè)置活動(dòng)項(xiàng)的方法                          
           'myPanel2',                    //***個(gè)參數(shù)為mypanel2的id 在這里也可以填數(shù)字 ‘1’    
           'slide'                        //這個(gè)參數(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:'這個(gè)是點(diǎn)擊按鈕之后才創(chuàng)建的Panel,演示到此結(jié)束'                      
      });    
       myApp.views.mainPanel.setActiveItem(             
                    pnl,{            //這里參數(shù)是剛創(chuàng)建的panel                          
                    type: 'slide',    //這里動(dòng)畫效果為一個(gè)動(dòng)畫效果對(duì)象                         
                     direction: 'right'                     
                    });                 
                 }            
               }          
        });                  
      myApp.views.mainPanel = new Ext.Panel({       
             fullscreen: true,              
             layout: 'card',             
              items: [myPanel1, myPanel2]    //***個(gè)為默認(rèn)界面          
           });      
     }}); 

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

ps：因?yàn)門abPanel、Carousel本身都是Card布局，因此，我們也可以調(diào)用它的setActiveItem()來改變當(dāng)前顯示的內(nèi)容。

小結(jié)：Sencha Touch快速入門2.0之Card布局的內(nèi)容介紹完了，希望通過本文的學(xué)習(xí)能對(duì)你有所幫助！