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:;
 }
 .pageTab .x-button {
     border:;
     padding:;
     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:;
     border:;
 }
 .tab .x-tabbar-dark .x-tab {
     color:#677C8B;
     border:;
     height:100%;
     border-radius:;
     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版本