Sencha touch 开发系列:容器组件:tabpanel,carousels
2013-05-09 00:13
543 查看
tabpanel,carousels这两玩意极其常用,这两玩意也很像,它们都是card类布局,在他们里面都可以放多个组件,tabpanel是通过它的导航切换(先项卡),而carousels是通过滑动进行子项切换的(可左右切换,也可上下切换)。
下面我们来玩tabpanel
?
效果:
这样就实现了一个简单的,可进行切换的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的时候的情况
代码:
?
效果:
注意看代码备注,我们添加了一个tabBar这个玩意,你可以来做一些选项卡的控制,还有我们为tabpanel添加了一个layout并添加子项显示动画,你把代码搞下来,可以换换动画玩。
tabpanel基本用法就这些了,现在我们来玩一个综合点的实例。
?
效果:
怎样,效果还不错吧?
有同学就会问了,我们在新闻列表页如何跳转到看新闻详情呢?这是个很常见的需求吧,就是列表到详情,将详情添加到tabpanel在tabpanel中去setActiveItem??
当然不是了看代码,看备注
效果:
这个例子基本完成了!或许一时半会不明白,但我们的应用基本是这样做的,你可以先熟悉,玩玩以后会理解的!
下面我们来玩carousel gogogo!
carousel基本和tabpanel玩法差不多了只是它没有了选项卡,而是通过手滑也换view
direction: 'vertical'就是注意下这玩意,用它配置你的carousel是上下滑还是左右滑。
我们来个综合点的例子玩玩就熟悉了,没啥难的!
看代码:
?
我基本就是把我们的tabpanel综合实例的代码改了下而以
看看效果:
还行不,呵呵,就完样,我们搞了tabpanel和carousels多看看代码备注,然后把代码放到code editor里面去跑跑,改改,玩玩!
有问题的可以反馈过来撒
有问题的同学可以加入我们的社区或群:13453484在线提问,我尽速解答。
下面我们来玩tabpanel
?
这样就实现了一个简单的,可进行切换的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的时候的情况
代码:
?
注意看代码备注,我们添加了一个tabBar这个玩意,你可以来做一些选项卡的控制,还有我们为tabpanel添加了一个layout并添加子项显示动画,你把代码搞下来,可以换换动画玩。
tabpanel基本用法就这些了,现在我们来玩一个综合点的实例。
?
怎样,效果还不错吧?
有同学就会问了,我们在新闻列表页如何跳转到看新闻详情呢?这是个很常见的需求吧,就是列表到详情,将详情添加到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是上下滑还是左右滑。
我们来个综合点的例子玩玩就熟悉了,没啥难的!
看代码:
?
看看效果:
还行不,呵呵,就完样,我们搞了tabpanel和carousels多看看代码备注,然后把代码放到code editor里面去跑跑,改改,玩玩!
有问题的可以反馈过来撒
有问题的同学可以加入我们的社区或群:13453484在线提问,我尽速解答。
相关文章推荐
- Sencha touch 开发系列:容器组件:tabpanel,carousels
- Sencha touch 开发系列:容器组件:tabpanel,carousels
- Sencha touch 开发系列:容器组件:panel formpanel
- Sencha Touch 2.0 组件:Carousels、List、TabPanel 之用法简介
- Sencha touch 开发系列:容器组件:dataview,list
- Sencha touch 开发系列:容器组件:nestedList,navigationview
- Sencha touch 开发系列:组件之容器
- Sencha touch 开发系列:组件之容器
- Sencha Touch 2 快速入门系列(四)-- 组件之标签面板(TabPanel)
- Sencha touch 开发系列:容器组件:dataview,list
- Sencha touch 开发系列:容器组件:nestedList,navigationview
- Sencha touch 开发系列:容器组件:dataview,list
- Sencha Touch 2.0 组件:Carousels、List、TabPanel 之用法简介
- Sencha touch 开发系列:组件布局
- sencha-touch开发的一些tips(tabPanel,提示框,store数据修改)
- Sencha Touch中TabPanel组件的使用(转)
- Sencha touch 开发系列:组件布局
- Sencha touch 开发系列:移动应用开发之组件
- Sencha Touch中TabPanel组件的使用
- Sencha touch 开发系列:类与ST组件,事件,自定义组件