复制代码 代码如下:

/*
*模仿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) {
        console.log(oldItem);
        if (oldItem) {
            oldItem.removeCls(\'x-tabBar-pressing\');
        }
        if (newItem) {
            newItem.addCls(\'x-tabBar-pressing\');
        }
    },
    //当按钮被点击时
    onButtonTap: function (button) {
        this.setSelectButton(button);
    },
    /**
    * @private
    *执行添加项，调用add方法后自动执行
    */
    onItemAdd: function (item, index) {
        if (!this.getSelectButton() && item.getInitialConfig(\'selected\')) {
            this.setSelectButton(item);
        }
        this.callParent(arguments);
    }
});

复制代码 代码如下:

.navToolbar {
    padding:0;
}
.navToolbar .x-button {
    border:0;
    margin:0;
    border-right:1px solid #585B5B;
    border-radius:0;
    padding:0;
}
.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\',
    config: {
        items: [
        {
            xtype: \'button\',
            text: \'问卷调查\',
            //只有第一个设置的属性有效
            selected: true
        },
        {
            xtype: \'button\',
            text: \'我的积分\'
        },
        {
            xtype: \'button\',
            text: \'开奖大厅\'
        },
        {
            xtype: \'button\',
            text: \'幸运号码\'
        },
        {
            xtype: \'button\',
            text: \'更多\'
        }]
    }
});