Sencha Touch 1.x TabPanel的左侧TabBar
2011-09-13 14:19
381 查看
先看看效果
其实是会碰到问题滴
sencha touch里,tabBar只有设在上面或者下面的时候,才能正常显示。如果设置到左侧的话,默认就会产生这样的结果:
要解决这个问题,我的第一反应就是用css。但是那无疑增加了复杂度。(我确实也那么搞过,麻烦得要命)
其实只要对sencha touch的布局熟一点,分析一下,很容易就能找到问题的关键。
水平一排过来的Tab1,Tab2,Tab3按钮,这是什么?这不就是hbox布局吗!
OK,也就是说要让它变成垂直的,只需要把hbox布局改为vbox布局即可。
第一个措施
因为Tab1,Tab2,Tab3是在TabBar里面的,所以我们把tabBar的layout改为vbox。代码如下:
tabBar : { layout: 'vbox', dock: 'left' }
发现没有效果。折腾了一下发现以下的写法才行得通:
tabBar : { layout: { type: 'vbox' }, dock: 'left' }
原因嘛。。。没弄懂。
这样一来,运行的效果就成了这个样子:
美化完善
紧挨在一起,很难看。于是我尝试着配置margin。我试着用css的语法来配margin居然行得通。惊喜呀。可以单独配置每个方向的margin。
tabBar : { layout: { type: 'vbox' }, defaults: { margin: '10 0 0 0', }, dock: 'left' }
于是,得到了最终的结果。也就是我们开头看到的那个样子。
完整代码如下:
Ext.setup({
onReady: function() {
new Ext.TabPanel({
fullscreen: true,
type: 'dark',
tabBar : { layout: { type: 'vbox' }, defaults: { margin: '10 0 0 0', }, dock: 'left' },
sortable: true,
items: [{
title: 'Tab 1',
html: '1',
cls: 'card1'
}, {
title: 'Tab 2',
html: '2',
cls: 'card2'
}, {
title: 'Tab 3',
html: '3',
cls: 'card3'
}]
});
}
});
相关文章推荐
- sencha touch 模仿tabpanel导航栏TabBar的实例代码
- sencha touch 模仿tabpanel导航栏TabBar的实例代码
- sencha touch 模仿tabpanel导航栏TabBar(2013-11-7)
- sencha touch 模仿tabpanel导航栏TabBar的实现代码
- Sencha-touch之TabPanel的Tab在点击时实施事件
- Sencha touch 开发系列:容器组件:panel formpanel
- sencha touch TabPanel 加入导航按钮(向左向右按钮) 以及Carousel插件(2014-11-7)
- sencha touch 2 tabpanel中List的不显示问题,解决方案
- sencha touch NavigationView 嵌套 TabPanel 的问题
- sencha touch之panel和tabpanel
- Sencha Touch 给 Panel 注册点击事件(tap)和其他touchstart,touchend 等事件
- sencha touch 学习笔记- 基本组件1-list和panel(2013网页装在兜里)
- sencha-touch1.1中如何点击button弹出一个"popup" panel
- sencha touch的tabpanel里tab比较多时,使tab子标签滚动
- Sencha Touch中TabPanel组件的使用(转)
- 初识Sencha Touch:面板Panel
- Sencha Touch 1.x 为tabPanel添加一个更多按钮。
- Sencha touch 开发系列:容器组件:tabpanel,carousels
- sencha-touch开发的一些tips(tabPanel,提示框,store数据修改)
- [Sencha Touch/ExtJS] Container/Panel/List等容器的滚动(到顶部)的方法