sencha touch 模仿tabpanel导航栏TabBar的实现代码

转载 2016年05月31日 18:38:01
这篇文章介绍了sencha touch 模仿tabpanel导航栏TabBar的实例代码,有需要的朋友可以参考一下

基于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) {
        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);
    }
});
需要的css:
复制代码 代码如下:
.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: '更多'
        }]
    }
});



举报

相关文章推荐

sencha touch之panel和tabpanel

最近在弄senchatouch的项目,所以边学习边开发,边记录,直接记录下test code如下: Panel: Ext.application({ name:'itKingApp', ...

sencha touch 2 tabpanel中List的不显示问题,解决方案

笔者在做sencha项目的时候碰到一个需求,就是"好友列表"中分为"未确认好友"和"已确认好友",两个都是一个list,自然想到的就是使用tabpanel来实现.   但是在sencha touc...

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

Sencha Touch 2.0 组件:Carousels、List、TabPanel 之用法简介

Carousels 组件 Carousels,翻译过来“传送带”的意思,顾名思义,仿佛屏幕背后就有一传送带,用户发出向左或向右的指令,即可命令传送带“移动”。移动设备上的屏幕就是当前显示的内容。在中...

Sencha Touch 2.0 组件:Carousels、List、TabPanel 之用法简介

Carousels 组件 Carousels,翻译过来“传送带”的意思,顾名思义,仿佛屏幕背后就有一传送带,用户发出向左或向右的指令,即可命令传送带“移动”。移动设备上的屏幕就是当前显示的内容。在中...

Sencha Touch 2 快速入门系列(四)-- 组件之标签面板(TabPanel)

本文已添加至Sencha Touch 2快速入门系列索引:http://blog.csdn.net/ardy_c/article/details/7544470 转载请注明出处:http://b...
  • ardy_c
  • ardy_c
  • 2012-05-07 13:14
  • 5890

Sencha Touch学习笔记(七)导航视图

前面的六篇已经把Sencha Touch的基础语法基本讲完了,现在开始我们来详细的说一说其中的一些组件。导航视图(Navigation View)Navigation View是Sencha Touc...

Sencha Touch 2:一行代码就将Web应用变本地应用

据国外媒体报道,应用开发工具提供商Sencha计划对基于HTML 5的移动开发框架Sencha Touch进行更新,通过在应用程序中添加一行代码就可将Web应用变成本地应用。该新版Sencha T...

[Phonegap+Sencha Touch] 移动开发61 使用 URL Schemes实现一个App启动另一个App的功能

一个App可以启动同一设备上的其他App,可以方便和提高用户体验。URL Schemes是一种机制,提供了一个App启动或恢复另一个App的能力。但URL Schemes真正强大的是用它来传递数据到另...

sencha touch 搜索功能search的实现

controller/courselib.js 先定义   config: {         refs: {         &...

[Phonegap+Sencha Touch] 移动开发49 js跨域请求的实现方法

如果是phonegap/cordova打包的,可以修改config.xml的access节点达到跨域的目的: 如果是网站,可以有下面的实现方法: 一、使用代理 在你当前域中架设一个服务端...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)