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

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此声明，且在文章页面给出原文连接，否则保留追究法律责任的权利。