sencha touch 模仿tabpanel導覽列TabBar的實例程式碼_javascript技巧

/*
*模仿tabtab >*/
Ext.define('ux.TabBar', {
    alternateClassName: 'tabBar',
    extend: 'Ext.Toolbar',
    extend: 'Ext.Toolbar',
    extend: 'Ext.Toolbar',
   : {
        docked: 'bottom',
        cls: 'navToolbar',
   
        },
        defaults: {
            flex: 1
        },
        //選取的按鈕
        selectButton        var me = this;
        me.callParent( );
        //監聽按鈕點選事件
        me.on({
       scope: me,
            tap: 'onButtonTap'
        });
    },
    //更新被選取按鈕
    updateSelectButton: function (newItem, oldItem) {
   🎜>            oldItem.removeCls ('x-tabBar-pressing');
        }
        if (newItem) {
        }
    },
//當按鈕被點擊時
    onButtonTap: function (button) {
        this.setSelectButton(button);
    },
    /**
    * @private
    *執行新增項，並在呼叫add方法後自動執行
   */
    onItemAdd: function ( item, index) {
        if (!this.getSelectButton() && item.getInitialConfig('selected')) {
    
        this.callParent(arguments) ;
    }
});



需要的css：





複製程式碼

    color:;
font 
}
.navToolbar .x-tabBar-pressing {
    background-image:none;
    background-color:#0f517e;
    background-color:#0f517e;
    background-color:#0f517e;
    background-color:#0f517e;
    background-color:#0f517e;
    background-color:#0f517e;
  % 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:-o-linear-gradient(top,#0a3351,#0c4267 17e 0f51,#0c4267 17e 67 17e1. 0f5280);
    background-image:linear-gradient(top,#0a3351,#0c4267 10%,#0f517e 65%,#0f5280);
}

使用：





複製程式碼

Ext.define('app.view.MyBar', {
    alternateClassName: 'myBar',
    extend: 'ux.TabBar',
  >    config: {
        items: [
        {
      : '問卷調查',
            //只有第一個設定的屬性有效
            selected : true
        },
        {
          🎜>        },
        {
            xtype: 'button',
            text: '開獎大廳'
        },
                 text: '幸運號碼'
        },
        {  ',
            text: '更多'
        }]
    }
));
;

效果圖：