Sencha touch 開發系列:容器組件:tabpanel,carousels

tabpanel,carousels這兩玩意極其常用，這兩玩意也很像，它們都是card類布局，在他們里面都可以放多個組件，tabpanel是通過它的導航切換(先項卡)，而carousels是通過滑動進行子項切換的（可左右切換，也可上下切換）。

下面我們來玩tabpanel

//創建一個全屏的tabpanel
Ext.create('Ext.TabPanel', {
    fullscreen: true,
    //選項卡（導航欄在下方）
    tabBarPosition: 'bottom',
    items: [
        {
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen'
        },
        {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        }
    ]
});

效果：

這樣就實現了一個簡單的，可進行切換的tabpanel

使用 tabpanel 需要注意的就是這玩意 tabBarPosition: 'bottom',為bottom時你可以為你的子項添加兩個玩意，title和iconCls前者是代表顯示的標題后者是顯示的圖標，你可以設定你想要的標題，你想要的圖標目前系統提供了以下圖標，若不夠，你也可以玩自己個性化的圖標（樣式）

• action
• add
• arrow_up
• arrow_right
• arrow_down
• arrow_left
• bookmarks
• compose
• delete
• download
• favorites
• info
• more
• refresh
• reply
• search
• settings
• star
• team
• time
• trash
• user

目前ST只提供了top,bottom這種情況下的樣式，如果你用left,或right看起來會很丑，你或許需要做一些樣式去搞搞。

下面我們來玩玩top的時候的情況

代碼：

//創建一個全屏的tabpanel
Ext.create('Ext.TabPanel', {
    fullscreen: true,
    //選項卡（導航欄在上方）
    tabBarPosition: 'top',
    tabBar:
    {
        //高亮
        ui:'light',
        //選項卡居中
        layout:{
            pack:'center'
        }
    },
    //各項內容的顯示控制
    layout: {
        type: 'card',
        //顯示動畫
        animation: {
            type: 'fade'
        }
    },
    items: [
        {
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen'
        },
        {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        }
    ]
});

　效果：

注意看代碼備注，我們添加了一個tabBar這個玩意，你可以來做一些選項卡的控制，還有我們為tabpanel添加了一個layout並添加子項顯示動畫，你把代碼搞下來，可以換換動畫玩。

tabpanel基本用法就這些了，現在我們來玩一個綜合點的實例。

//首先我聲明一些自己的view
//1.首頁,2.新聞頁 3.設定頁

//首頁聲明
Ext.define('IndexPage', {
    xtype:'indexPage',
    extend: 'Ext.Container',
    config: 
    {        
        title:'首頁',
        iconCls:'home',
        items:[{xtype:'titlebar',title:'綜合應用程序',docked:'top'}],
        html:'首頁內容'
    }    
});
//新聞頁聲明
Ext.define('NewsList', {
    xtype:'newsList',
    extend: 'Ext.dataview.List',
    config: 
    {        
        title:'新聞列表',
        iconCls:'time',
        items:[{xtype:'titlebar',title:'新聞列表',docked:'top'}],
        //新聞數據
        store: {
          fields: ['title', 'content','date'],
          data: [
              {title: '什么情況',  content: '<p>中國搞死日本</p>',date:'2012/07/12'},
            		{title: '搞啥',   content: '中國搞死美國',date:'2012/07/12'},
            		{title: '啥意思', content: '中國搞死菲利賓',date:'2012/07/12'},
            		{title: '搞不搞', content: '中國搞死韓國',date:'2012/07/12'},
            		{title: '汗，不好搞',   content: '中國搞死阿三',date:'2012/07/12'}
            ]
       },
        itemTpl: '<p>{title}</p><p style="font-size:10px;">{date}</p>'
    }    
});
//設定頁聲明
Ext.define('Settings', {
    xtype:'settings',
    extend: 'Ext.Container',
    config: 
    {        
        title:'設定',
        iconCls:'settings',
        items:[{xtype:'titlebar',title:'我的設定',docked:'top'}],
        html:'你想設定啥哦'
    }    
});

//創建一個全屏的tabpanel
Ext.create('Ext.TabPanel', {
    fullscreen: true,
    //選項卡（導航欄在下方）
    tabBarPosition: 'bottom',    
    //各項內容的顯示控制
    layout: {
        type: 'card',
        //顯示動畫
        animation: {
            type: 'fade'
        }
    },
    
    items:[{xtype:'indexPage'},{xtype:'newsList'},{xtype:'settings'}]
});

效果：

怎樣，效果還不錯吧？

有同學就會問了，我們在新聞列表頁如何跳轉到看新聞詳情呢？這是個很常見的需求吧，就是列表到詳情，將詳情添加到tabpanel在tabpanel中去setActiveItem??

 當然不是了看代碼，看備注

//主界面
var mainForm;
//首先我聲明一些自己的view
//1.首頁,2.新聞頁 3.設定頁 4.新聞詳情頁


//新聞詳情
Ext.define('NewsDetail', {
    xtype:'newsDetail',
    extend: 'Ext.Container',
    config: 
    {    
        scrollable:true,
        items:[{xtype:'titlebar',title:'新聞標題',docked:'top',items:[{xtype:'button',ui:'back',text:'返回',handler:function(){
            //返回到新聞列表頁
            var newsPage=mainForm.down("newsList");
            newsPage.setActiveItem(0);
        }}]}],
        html:'瓣聞內容'
    },
    //看新聞的方法
    lookNews:function(model)
    {
        //將新聞內容放進容器中
        this.setHtml(model.get("content"));
        this.down("titlebar").setTitle(model.get("title"));
    }
});

//首頁聲明
Ext.define('IndexPage', {
    xtype:'indexPage',
    extend: 'Ext.Container',
    config: 
    {        
        title:'首頁',
        iconCls:'home',
        items:[{xtype:'titlebar',title:'綜合應用程序',docked:'top'}],
        html:'首頁內容'
    }    
});
//新聞頁聲明
Ext.define('NewsList', {
    xtype:'newsList',
    extend: 'Ext.Container',
    config: 
    {        
        title:'新聞列表',
        iconCls:'time',
        layout:'card',
        items:[
            {
               xtype:'list',
               items:[{xtype:'titlebar',title:'新聞列表',docked:'top'}],
               //新聞數據
               store: {
                        fields: ['title', 'content','date'],
                        data: [
                                {title: '什么情況',  content: '<p>中國搞死日本</p>',date:'2012/07/12'},
                                {title: '搞啥',   content: '中國搞死美國',date:'2012/07/12'},
                                {title: '啥意思', content: '中國搞死菲利賓',date:'2012/07/12'},
                                {title: '搞不搞', content: '中國搞死韓國',date:'2012/07/12'},
                                 {title: '汗，不好搞',   content: '中國搞死阿三',date:'2012/07/12'}
                ]},
                itemTpl: '<p>{title}</p><p style="font-size:10px;">{date}</p>',
                //添加不圖標事件上一篇學習的哦？
                 onItemDisclosure:function(record)
                {
                    //我們在主界面下找到新聞頁面板
                    var newsPage=mainForm.down("newsList");
                    
                    //查找我們的新聞面板下是否有詳情面板
                    var newsDetail;
                    newsDetail=newsPage.down('newsDetail');
                   
                    if(newsDetail==null)
                    {
                        //創建一個新聞詳情view
                       newsDetail=Ext.create("NewsDetail");
                    }
                    //看新聞
                    newsDetail.lookNews(record);
                    
                    //添面到新聞面板頁，將新聞詳情
                    newsPage.add(newsDetail);
                    //顯示新聞詳情
                    newsPage.setActiveItem(newsDetail);
                    
                }}],
                
                
       
       
    }    
});
//設定頁聲明
Ext.define('Settings', {
    xtype:'settings',
    extend: 'Ext.Container',
    config: 
    {        
        title:'設定',
        iconCls:'settings',
        items:[{xtype:'titlebar',title:'我的設定',docked:'top'}],
        html:'你想設定啥哦'
    }    
});


//創建一個全屏的tabpanel
mainForm=Ext.create('Ext.TabPanel', {
    fullscreen: true,
    //選項卡（導航欄在下方）
    tabBarPosition: 'bottom',    
    //各項內容的顯示控制
    layout: {
        type: 'card',
        //顯示動畫
        animation: {
            type: 'fade'
        }
    },
    
    items:[{xtype:'indexPage'},{xtype:'newsList'},{xtype:'settings'}]
});

效果：

這個例子基本完成了！或許一時半會不明白，但我們的應用基本是這樣做的，你可以先熟悉，玩玩以后會理解的！

 

下面我們來玩carousel  gogogo!

carousel基本和tabpanel玩法差不多了只是它沒有了選項卡，而是通過手滑也換view

 direction: 'vertical'就是注意下這玩意，用它配置你的carousel是上下滑還是左右滑。

我們來個綜合點的例子玩玩就熟悉了，沒啥難的!

看代碼：

//主界面
var mainForm;
//首先我聲明一些自己的view
//1.首頁,2.新聞頁 3.設定頁 4.新聞詳情頁
//新聞詳情
Ext.define('NewsDetail', {
    xtype:'newsDetail',
    extend: 'Ext.Container',
    config: 
    {    
        scrollable:true,
        items:[{xtype:'titlebar',title:'新聞標題',docked:'top',items:[{xtype:'button',ui:'back',text:'返回',handler:function(){
            //返回到新聞列表頁
            var newsPage=mainForm.down("newsList");
            newsPage.setActiveItem(0);
        }}]}],
        html:'瓣聞內容'
    },
    //看新聞的方法
    lookNews:function(model)
    {
        //將新聞內容放進容器中
        this.setHtml(model.get("content"));
        this.down("titlebar").setTitle(model.get("title"));
    }
});

//首頁聲明
Ext.define('IndexPage', {
    xtype:'indexPage',
    extend: 'Ext.Container',
    config: 
    { 
        items:[{xtype:'titlebar',title:'綜合應用程序',docked:'top'}],
        html:'首頁內容'
    }    
});
//新聞頁聲明
Ext.define('NewsList', {
    xtype:'newsList',
    extend: 'Ext.Container',
    config: 
    {
        layout:'card',
        items:[
            {
               xtype:'list',
               items:[{xtype:'titlebar',title:'新聞列表',docked:'top'}],
               //新聞數據
               store: {
                        fields: ['title', 'content','date'],
                        data: [
                                {title: '什么情況',  content: '<p>中國搞死日本</p>',date:'2012/07/12'},
                                {title: '搞啥',   content: '中國搞死美國',date:'2012/07/12'},
                                {title: '啥意思', content: '中國搞死菲利賓',date:'2012/07/12'},
                                {title: '搞不搞', content: '中國搞死韓國',date:'2012/07/12'},
                                 {title: '汗，不好搞',   content: '中國搞死阿三',date:'2012/07/12'}
                ]},
                itemTpl: '<p>{title}</p><p style="font-size:10px;">{date}</p>',
                //添加不圖標事件上一篇學習的哦？
                 onItemDisclosure:function(record)
                {
                    //我們在主界面下找到新聞頁面板
                    var newsPage=mainForm.down("newsList");
                    
                    //查找我們的新聞面板下是否有詳情面板
                    var newsDetail;
                    newsDetail=newsPage.down('newsDetail');
                   
                    if(newsDetail==null)
                    {
                        //創建一個新聞詳情view
                       newsDetail=Ext.create("NewsDetail");
                    }
                    //看新聞
                    newsDetail.lookNews(record);
                    
                    //添面到新聞面板頁，將新聞詳情
                    newsPage.add(newsDetail);
                    //顯示新聞詳情
                    newsPage.setActiveItem(newsDetail);
                    
                }}],
                
                
       
       
    }    
});
//設定頁聲明
Ext.define('Settings', {
    xtype:'settings',
    extend: 'Ext.Container',
    config: 
    {        
        title:'設定',
        iconCls:'settings',
        items:[{xtype:'titlebar',title:'我的設定',docked:'top'}],
        html:'你想設定啥哦'
    }    
});


//創建一個全屏的carousel
mainForm=Ext.create('Ext.Carousel', {
    fullscreen: true,
     items:[{xtype:'indexPage'},{xtype:'newsList'},{xtype:'settings'}]
});

我基本就是把我們的tabpanel綜合實例的代碼改了下而以

看看效果:

還行不，呵呵，就完樣，我們搞了tabpanel和carousels多看看代碼備注，然后把代碼放到code editor里面去跑跑，改改，玩玩！

有問題的可以反饋過來撒

 

 

 

 

有問題的同學可以加入我們的社區或群：13453484在線提問，我盡速解答。

作者：Louja
出處：http://html5mob.cnblogs.com 同步在：http://html5mob.com
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此聲明，且在文章頁面給出原文連接，否則保留追究法律責任的權利。