sencha touch 模仿tabpanel导航栏TabBar(2013-11-7)

基于sencha touch 2.2所写

代码：

 1 /*
 2 *模仿tabpanel导航栏
 3 */
 4 Ext.define('ux.TabBar', {
 5     alternateClassName: 'tabBar',
 6     extend: 'Ext.Toolbar',
 7     xtype: 'tabBar',
 8     config: {
 9         docked: 'bottom',
10         cls: 'navToolbar',
11         layout: {
12             align: 'stretch'
13         },
14         defaults: {
15             flex: 1
16         },
17         //被选中的按钮
18         selectButton: null
19     },
20     initialize: function () {
21         var me = this;
22         me.callParent();
23         //监听按钮点击事件
24         me.on({
25             delegate: '> button',
26             scope: me,
27             tap: 'onButtonTap'
28         });
29     },
30     //更新被选中按钮
31     updateSelectButton: function (newItem, oldItem) {
32         if (oldItem) {
33             oldItem.removeCls('x-tabBar-pressing');
34         }
35         if (newItem) {
36             newItem.addCls('x-tabBar-pressing');
37         }
38     },
39     //当按钮被点击时
40     onButtonTap: function (button) {
41         if (!button.getInitialConfig('noSelect')) {
42             this.setSelectButton(button);
43         }
44     },
45     /**
46     * @private 
47     *执行添加项，调用add方法后自动执行
48     */
49     onItemAdd: function (item, index) {
50         if (!this.getSelectButton() && item.getInitialConfig('selected')) {
51             this.setSelectButton(item);
52         }
53         this.callParent(arguments);
54     }
55 });

 

需要的css：

 1 .navToolbar {
 2     padding:0;
 3 }
 4 .navToolbar .x-button {
 5     border:0;
 6     margin:0;
 7     border-right:1px solid #585B5B;
 8     border-radius:0;
 9     padding:0;
10 }
11 .navToolbar .x-button .x-button-label {
12     font-weight:normal;
13     color:White;
14     font-size:0.6em;
15 }
16 .navToolbar .x-tabBar-pressing {
17     background-image:none;
18     background-color:#0f517e;
19     background-image:-webkit-gradient(linear,50% 0%,50% 100%,color-stop(0%,#0a3351),color-stop(10%,#0c4267),color-stop(65%,#0f517e),color-stop(100%,#0f5280));
20     background-image:-webkit-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280);
21     background-image:-moz-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280);
22     background-image:-o-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280);
23     background-image:linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280);
24 }

 

使用：

 1 Ext.define('app.view.MyBar', {
 2     alternateClassName: 'myBar',
 3     extend: 'ux.TabBar',
 4     xtype: 'myBar',
 5     requires: ['app.view.About'],
 6     config: {
 7         items: [
 8         {
 9             xtype: 'button',
10             text: '首页',
11             //只有第一个设置的属性有效
12             selected: true,
13             action: 'redirect',
14             redirect: 'home'
15         },
16         {
17             xtype: 'button',
18             text: '关于',
19             action: 'redirect',
20             redirect: 'about'
21         },
22         {
23             xtype: 'button',
24             text: '其他',
25             //没有选中效果
26             noSelect:true,
27             action: 'other'
28         }]
29     }
30 });

 

效果图：

2013.11.7

增加配置：没有选中效果

 

使用示例：

http://www.cnblogs.com/mlzs/p/3382229.html

posted @ 2013-10-24 15:02  魔狼再世  阅读(1076)  评论(0)  编辑  收藏  举报