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裏面去跑跑，改改，玩玩！

有問題的可以反饋過來撒