sencha touch TabPanel 加入导航按钮(向左向右按钮) 以及Carousel插件(2014-11-7)

Carousel插件代码：

/*
* TabPanel的Carousel功能插件
* 取至
* https://github.com/VinylFox/Ext.ux.touch.SwipeTabs
*/
Ext.define('ux.plugin.SwipeTabs', {
    alias: 'plugin.swipetabs',
    xtype: 'swipetabs',
    config: {
        cmp: null,
        //是否循环滚动
        allowOverflow: false,
        animation: {
            duration: 300,
            easing: 'ease-out',
            type: 'slide'
        },
        /**
        * @cfg {Object} [allowDirections=['left', 'right', 'up', 'down',]] 只有指定方向可以切换.
        * @private
        * @accessor
        */
        allowDirections: ['left', 'right']
    },
    constructor: function (config) {
        this.initConfig(config);
        this.callParent([config]);
    },
    init: function (cmp) {
        this.setCmp(cmp);
    },
    updateCmp: function (newCmp, oldCmp) {
        if (oldCmp) {
            oldCmp.element.un('swipe', this.onSwipe);
        }
        if (newCmp) {
            newCmp.element.on('swipe', this.onSwipe, this);
        }
    },
    onSwipe: function (e) {
        if (this.getAllowDirections().indexOf(e.direction) < 0) {
            return;
        }
        var cmp = this.getCmp(),
        allowOverflow = this.getAllowOverflow(),
        animation = this.getAnimation(),
        //获取切换动画效果
        direction = e.direction,
        //滑动方向
        activeItem = cmp.getActiveItem(),
        //当前选中项
        innerItems = cmp.getInnerItems(),
        //所有项
        numIdx = innerItems.length - 1,
        //最大索引
        idx = Ext.Array.indexOf(innerItems, activeItem),
        //当前选中项索引
        newIdx = idx + (direction === 'left' ? 1 : -1),
        //目标索引
        newItem;
        //处理目标索引，避免出错
        if (newIdx < 0) {
            if (allowOverflow) {
                newItem = innerItems[numIdx];
            }
        } else if (newIdx > numIdx) {
            if (allowOverflow) {
                newItem = innerItems[0];
            }
        } else {
            newItem = innerItems[newIdx]
        }
        if (newItem) {
            animation = Ext.apply({},
            {
                direction: direction
            },
            animation);
            //切换
            cmp.animateActiveItem(newItem, animation);
            //设置导航滚动
            var mun = cmp.getInitialConfig('moveNum'),
                scrollable;
            if (mun && mun > 0) {
                scrollable = cmp.getTabBar().getScrollable();
                if (scrollable) {
                    scrollable.getScroller().scrollTo(newIdx * mun, 0);
                }
            }
        }
    }
});

加入左右导航按钮代码：

/*
*为TabPanel加上向左向右按钮
*选项较多时可以滚动
*/
Ext.define('ux.PageTab', {
    extend: 'Ext.TabPanel',
    xtype: 'pageTab',
    config: {
        //每次移动的距离
        moveNum: 41,
        //是否循环滚动
        allowOverflow: false,
        //向右翻页按钮
        rightBtn: {
            iconMask: true,
            iconCls: 'maskIco arrow_right',
            name: 'move',
            action: 1,
            docked: 'right'
        },
        //向左翻页按钮
        leftBtn: {
            iconCls: 'maskIco arrow_left',
            iconMask: true,
            action: -1,
            name: 'move',
            docked: 'left'
        },
        //设置横向滚动条
        tabBar: {
            cls: 'pageTab',
            scrollable: {
                direction: 'horizontal',
                //隐藏滚动条样式
                indicators: false
            }
        }
    },
    //创建右翻页按钮
    applyRightBtn: function (config) {
        return Ext.factory(config, Ext.Button, this.getRightBtn());
    },
    //更新右翻页按钮
    updateRightBtn: function (newRightBtn, oldRightBtn) {
        this.updateMoveBtn(newRightBtn, oldRightBtn);
    },
    //创建左翻页按钮
    applyLeftBtn: function (config) {
        return Ext.factory(config, Ext.Button, this.getLeftBtn());
    },
    //更新左翻页按钮
    updateLeftBtn: function (newLeftBtn, oldLeftBtn) {
        this.updateMoveBtn(newLeftBtn, oldLeftBtn);
    },
    //更新翻页按钮
    updateMoveBtn: function (newMoveBtn, oldMoveBtn) {
        if (oldMoveBtn) {
            this.getTabBar().remove(oldMoveBtn);
        }
        if (newMoveBtn) {
            this.getTabBar().add(newMoveBtn);
            newMoveBtn.on({
                scope: this,
                tap: this.onTabMove
            });
        }
    },
    //点击翻页按钮执行
    onTabMove: function (btn) {
        //获取当前项
        var activeItem = this.getActiveItem(),
        //是否循环滚动
        allowOverflow = this.getAllowOverflow(),
        //获取所有项
        innerItems = this.getInnerItems(),
        //获取最大索引
        numIdx = innerItems.length - 1,
        //获取当前选中项索引
        idx = Ext.Array.indexOf(innerItems, activeItem),
        //获取点击按钮后索引
        newIdx = idx + btn.config.action;
        if (newIdx < 0) {
            if (!allowOverflow) return;
            newIdx = numIdx;
        } else if (newIdx > numIdx) {
            if (!allowOverflow) return;
            newIdx = 0;
        }
        //选中新项
        this.setActiveItem(newIdx);
        this.setScroll(newIdx);
    },
    //选择项
    selectView: function (itemId) {
        //获取所有项
        var me = this, innerItems = me.getInnerItems(), i, ln, item;
        for (i = 0, ln = innerItems.length; i < ln; i++) {
            item = innerItems[i];
            if (item.getItemId() == itemId) {
                me.setActiveItem(item);
                me.setScroll(i);
                break;
            }
        }
    },
    //设置滚动条
    setScroll: function (newIdx) {
        //设置新的滚动位置
        var mun = this.getMoveNum();
        if (mun && mun > 0) {
            var scr = this.getTabBar().getScrollable().getScroller();
            scr.scrollTo(newIdx * mun, 0);
        }
    }
});

所需css：

.x-tabpanel .pageTab {
    padding:0;
}
.pageTab .x-button {
    border:0;
    padding:0;
    background-color:transparent;
    background-image:none;
}
.pageTab .x-button .x-button-icon {
    width: 1.5em;
    margin:0.5em 0;
    -webkit-mask-size:auto 100%;
    background-color:#EEEFEF;
    background-image:none;
}
.pageTab .x-button.x-button-pressing .x-button-icon {
    background-color:#2A8BBE;
}

使用示例：

Ext.define('app.view.action.List', {
    alternateClassName: 'actionList',
    extend: 'ux.PageTab',
    xtype: 'actionList',
    requires: ['ux.plugin.SwipeTabs', 'app.view.action.TabList'],
    config: {
        cls: 'tab',
        plugins: 'swipetabs',
        items: [{
            title: '校园活动',
            xtype: 'actionTabList',
            store: 'actionCampusList'
        },
        {
            title: '其它活动',
            xtype: 'actionTabList',
            store: 'actionCampusList'
        },
        {
            title: '讲座报告',
            xtype: 'actionTabList',
            store: 'actionCampusList'
        },
        {
            title: '公益活动',
            xtype: 'actionTabList',
            store: 'actionCampusList'
        },
        {
            title: '比赛活动',
            xtype: 'actionTabList',
            store: 'actionCampusList'
        },
        {
            title: '招聘实习',
            xtype: 'actionTabList',
            store: 'actionCampusList'
        }, {
            title: '社团活动',
            xtype: 'actionTabList',
            store: 'actionCampusList'
        }]
    }
});

示例部分css：

.tab {
    height:100%;
}
.tab .x-tabbar-dark {
    background-image:none;
    background-color:#D3DCE3;
    padding:0;
    border:0;
}
.tab .x-tabbar-dark .x-tab {
    color:#677C8B;
    border:0;
    height:100%;
    border-radius:0;
    padding:0.8em 0.2em;
}
.tab .x-tabbar-dark .x-tab-active {
    background-color:transparent;
    background-image:none;
    border-bottom:1px solid #00A4FF;
    color:#060606;
}

效果：

2013.9.6

优化PageTab内for循环结构

2014.11.7

修复bug，适配到2.4.1版本