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

基于sencha touch 2.2所写

代码：

 /*
 *模仿tabpanel导航栏
 */
 Ext.define('ux.TabBar', {
     alternateClassName: 'tabBar',
     extend: 'Ext.Toolbar',
     xtype: 'tabBar',
     config: {
         docked: 'bottom',
         cls: 'navToolbar',
         layout: {
             align: 'stretch'
         },
         defaults: {
             flex: 1
         },
         //被选中的按钮
         selectButton: null
     },
     initialize: function () {
         var me = this;
         me.callParent();
         //监听按钮点击事件
         me.on({
             delegate: '> button',
             scope: me,
             tap: 'onButtonTap'
         });
     },
     //更新被选中按钮
     updateSelectButton: function (newItem, oldItem) {
         if (oldItem) {
             oldItem.removeCls('x-tabBar-pressing');
         }
         if (newItem) {
             newItem.addCls('x-tabBar-pressing');
         }
     },
     //当按钮被点击时
     onButtonTap: function (button) {
         if (!button.getInitialConfig('noSelect')) {
             this.setSelectButton(button);
         }
     },
     /**
     * @private
     *执行添加项，调用add方法后自动执行
     */
     onItemAdd: function (item, index) {
         if (!this.getSelectButton() && item.getInitialConfig('selected')) {
             this.setSelectButton(item);
         }
         this.callParent(arguments);
     }
 });

需要的css：

 .navToolbar {
     padding:;
 }
 .navToolbar .x-button {
     border:;
     margin:;
     border-right:1px solid #585B5B;
     border-radius:;
     padding:;
 }
 .navToolbar .x-button .x-button-label {
     font-weight:normal;
     color:White;
     font-size:0.6em;
 }
 .navToolbar .x-tabBar-pressing {
     background-image:none;
     background-color:#0f517e;
     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));
     background-image:-webkit-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280);
     background-image:-moz-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280);
     background-image:-o-linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280);
     background-image:linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280);
 }

使用：

 Ext.define('app.view.MyBar', {
     alternateClassName: 'myBar',
     extend: 'ux.TabBar',
     xtype: 'myBar',
     requires: ['app.view.About'],
     config: {
         items: [
         {
             xtype: 'button',
             text: '首页',
             //只有第一个设置的属性有效
             selected: true,
             action: 'redirect',
             redirect: 'home'
         },
         {
             xtype: 'button',
             text: '关于',
             action: 'redirect',
             redirect: 'about'
         },
         {
             xtype: 'button',
             text: '其他',
             //没有选中效果
             noSelect:true,
             action: 'other'
         }]
     }
 });

效果图：

2013.11.7

增加配置：没有选中效果

使用示例：

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