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:'你想设定啥哦'    }    });//创建一个全屏的tabpanelmainForm=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是上下滑还是左右滑。

我们来个综合点的例子玩玩就熟悉了，没啥难的!

看代码：

?

//主界面

varmainForm;

//首先我声明一些自己的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(){

            //返回到新闻列表页

            varnewsPage=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)

                {

                    //我们在主界面下找到新闻页面板

                    varnewsPage=mainForm.down("newsList");

                      

                    //查找我们的新闻面板下是否有详情面板

                    varnewsDetail;

                    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在线提问，我尽速解答。