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(资料和教程集合)

原文地址:http://blog.csdn.net/ydj9931/article/details/7285440 译者注:本篇文章为开发者提供了零基础使用Sencha Touch的一些资料...
  • jianzhanger
  • jianzhanger
  • 2015年09月28日 17:12
  • 1928

SenchaTouch 2 一个简易的登录页面

最近公司让做一个App,用到的SenchaTouch 2,对于一个连
  • yuwei1991
  • yuwei1991
  • 2014年08月21日 17:09
  • 1268

sencha touch list 批量选择扩展

修改后的代码: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 ...
  • qiao0078
  • qiao0078
  • 2016年01月20日 13:19
  • 761

sencha touch 入门系列 (二)sencha touch 开发准备

这是本人第一次写博客教程,没什么经验,文笔也不是很好,写这教程一方面为了巩固自己这段时间的学习成果,一方面帮助大家解决问题,欢迎大家多提建议,指出问题。接下来我们就开始我们的sencha touch开...
  • cjpx00008
  • cjpx00008
  • 2015年01月15日 14:27
  • 4656

【翻译】探究Ext JS 5和Sencha Touch的布局系统

布局系统是Sencha框架中最强大和最有特色的一个部分。布局要处理应用程序中每一个组件的尺寸和位置。在Ext JS和Sencha Touch直接有许多相似之处,尤其是现在Ext JS 5开始支持平板更...
  • tianxiaode
  • tianxiaode
  • 2014年04月25日 19:11
  • 5749

[Phonegap+Sencha Touch] 移动开发7、Sencha Touch图标的使用与自定义

Sencha touch 2.2之前,图标都是通过 几张不同分辨率png格式的图片(适应不同分辨率的设备),加上css3样式-webkit-mask,实现的单色图标。 2.2之后,图标的实现方式,换成...
  • lovelyelfpop
  • lovelyelfpop
  • 2014年03月03日 19:22
  • 6367

sencha touch 学习笔记- 安装与环境

环境搭建视频共享链接 百度网盘:http://pan.baidu.com/s/1mg5DpS8 参考资料: http://www.cnblogs.com/qqloving/archive/2...
  • wang_tao219
  • wang_tao219
  • 2015年08月25日 16:49
  • 1074

跟我一起玩转Sencha Touch 移动 WebApp 开发(一)

跟我一起玩转Sencha Touch 移动 WebApp 开发(一) http://www.cnblogs.com/zhwl/p/3862554.html 1.目录 移动...
  • csnewdn
  • csnewdn
  • 2016年11月01日 17:34
  • 1016

Sencha Touch入门:Sencha Touch开发环境搭建及使用 Sencha Cmd 自动创建项目框架

Sencha被翻译成“煎茶”,Sencha下有很多优秀的项目比如Complete 、Extjs、Touch、Animator、GXT 、Architect等其它相关产品。 Sencha Touch ...
  • cq1982
  • cq1982
  • 2015年05月10日 15:56
  • 2129

使用Eclipse开发Sencha Touch框架教程--安装开发环境和senchatouch

使用Eclipse开发Sencha Touch框架的教程是本文要介绍的内容,主要是来了解Sencha Touch框架的开发快速入门学习,具体内容的实现来看本文详解。 首先跟其他的许多框架一样 S...
  • albert528108
  • albert528108
  • 2013年11月12日 14:45
  • 2018
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:sencha touch 模仿tabpanel导航栏TabBar的实现代码
举报原因:
原因补充:

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