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里面去跑跑，改改，玩玩！
有问题的可以反馈过来撒
扫一扫
2313
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
