基于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
增加配置：没有选中效果
使用示例：