Carousel插件代码：
1 /* 2 * TabPanel的Carousel功能插件 3 * 取至 4 * https://github.com/VinylFox/Ext.ux.touch.SwipeTabs 5 */ 6 Ext.define('ux.plugin.SwipeTabs', { 7 alias: 'plugin.swipetabs', 8 xtype: 'swipetabs', 9 config: {10 cmp: null,11 //是否循环滚动12 allowOverflow: false,13 animation: {14 duration: 300,15 easing: 'ease-out',16 type: 'slide'17 },18 /**19 * @cfg {Object} [allowDirections=['left', 'right', 'up', 'down',]] 只有指定方向可以切换.20 * @private21 * @accessor22 */23 allowDirections: ['left', 'right']24 },25 constructor: function (config) {26 this.initConfig(config);27 this.callParent([config]);28 },29 init: function (cmp) {30 this.setCmp(cmp);31 },32 updateCmp: function (newCmp, oldCmp) {33 if (oldCmp) {34 oldCmp.element.un('swipe', this.onSwipe);35 }36 if (newCmp) {37 newCmp.element.on('swipe', this.onSwipe, this);38 }39 },40 onSwipe: function (e) {41 if (this.getAllowDirections().indexOf(e.direction) < 0) {42 return;43 }44 var cmp = this.getCmp(),45 allowOverflow = this.getAllowOverflow(),46 animation = this.getAnimation(),47 //获取切换动画效果48 direction = e.direction,49 //滑动方向50 activeItem = cmp.getActiveItem(),51 //当前选中项52 innerItems = cmp.getInnerItems(),53 //所有项54 numIdx = innerItems.length - 1,55 //最大索引56 idx = Ext.Array.indexOf(innerItems, activeItem),57 //当前选中项索引58 newIdx = idx + (direction === 'left' ? 1 : -1),59 //目标索引60 newItem;61 //处理目标索引，避免出错62 if (newIdx < 0) {63 if (allowOverflow) {64 newItem = innerItems[numIdx];65 }66 } else if (newIdx > numIdx) {67 if (allowOverflow) {68 newItem = innerItems[0];69 }70 } else {71 newItem = innerItems[newIdx]72 }73 if (newItem) {74 animation = Ext.apply({},75 {76 direction: direction77 },78 animation);79 //切换80 cmp.animateActiveItem(newItem, animation);81 //设置导航滚动82 var mun = cmp.getInitialConfig('moveNum'),83 scrollable;84 if (mun && mun > 0) {85 scrollable = cmp.getTabBar().getScrollable();86 if (scrollable) {87 scrollable.getScroller().scrollTo(newIdx * mun, 0);88 }89 }90 }91 }92 });
加入左右导航按钮代码：
1 /* 2 *为TabPanel加上向左向右按钮 3 *选项较多时可以滚动 4 */ 5 Ext.define('ux.PageTab', { 6 extend: 'Ext.TabPanel', 7 xtype: 'pageTab', 8 config: { 9 //每次移动的距离 10 moveNum: 41, 11 //是否循环滚动 12 allowOverflow: false, 13 //向右翻页按钮 14 rightBtn: { 15 iconMask: true, 16 iconCls: 'maskIco arrow_right', 17 name: 'move', 18 action: 1, 19 docked: 'right' 20 }, 21 //向左翻页按钮 22 leftBtn: { 23 iconCls: 'maskIco arrow_left', 24 iconMask: true, 25 action: -1, 26 name: 'move', 27 docked: 'left' 28 }, 29 //设置横向滚动条 30 tabBar: { 31 cls: 'pageTab', 32 scrollable: { 33 direction: 'horizontal', 34 //隐藏滚动条样式 35 indicators: false 36 } 37 } 38 }, 39 //创建右翻页按钮 40 applyRightBtn: function (config) { 41 return Ext.factory(config, Ext.Button, this.getRightBtn()); 42 }, 43 //更新右翻页按钮 44 updateRightBtn: function (newRightBtn, oldRightBtn) { 45 this.updateMoveBtn(newRightBtn, oldRightBtn); 46 }, 47 //创建左翻页按钮 48 applyLeftBtn: function (config) { 49 return Ext.factory(config, Ext.Button, this.getLeftBtn()); 50 }, 51 //更新左翻页按钮 52 updateLeftBtn: function (newLeftBtn, oldLeftBtn) { 53 this.updateMoveBtn(newLeftBtn, oldLeftBtn); 54 }, 55 //更新翻页按钮 56 updateMoveBtn: function (newMoveBtn, oldMoveBtn) { 57 if (oldMoveBtn) { 58 this.getTabBar().remove(oldMoveBtn); 59 } 60 if (newMoveBtn) { 61 this.getTabBar().add(newMoveBtn); 62 newMoveBtn.on({ 63 scope: this, 64 tap: this.onTabMove 65 }); 66 } 67 }, 68 //点击翻页按钮执行 69 onTabMove: function (btn) { 70 //获取当前项 71 var activeItem = this.getActiveItem(), 72 //是否循环滚动 73 allowOverflow = this.getAllowOverflow(), 74 //获取所有项 75 innerItems = this.getInnerItems(), 76 //获取最大索引 77 numIdx = innerItems.length - 1, 78 //获取当前选中项索引 79 idx = Ext.Array.indexOf(innerItems, activeItem), 80 //获取点击按钮后索引 81 newIdx = idx + btn.config.action; 82 if (newIdx < 0) { 83 if (!allowOverflow) return; 84 newIdx = numIdx; 85 } else if (newIdx > numIdx) { 86 if (!allowOverflow) return; 87 newIdx = 0; 88 } 89 //选中新项 90 this.setActiveItem(newIdx); 91 this.setScroll(newIdx); 92 }, 93 //选择项 94 selectView: function (itemId) { 95 //获取所有项 96 var me = this, innerItems = me.getInnerItems(), i, ln, item; 97 for (i = 0, ln = innerItems.length; i < ln; i++) { 98 item = innerItems[i]; 99 if (item.getItemId() == itemId) {100 me.setActiveItem(item);101 me.setScroll(i);102 break;103 }104 }105 },106 //设置滚动条107 setScroll: function (newIdx) {108 //设置新的滚动位置109 var mun = this.getMoveNum();110 if (mun && mun > 0) {111 var scr = this.getTabBar().getScrollable().getScroller();112 scr.scrollTo(newIdx * mun, 0);113 }114 }115 });
所需css：
1 .x-tabpanel .pageTab { 2 padding:0; 3 } 4 .pageTab .x-button { 5 border:0; 6 padding:0; 7 background-color:transparent; 8 background-image:none; 9 }10 .pageTab .x-button .x-button-icon {11 width: 1.5em;12 margin:0.5em 0;13 -webkit-mask-size:auto 100%;14 background-color:#EEEFEF;15 background-image:none;16 }17 .pageTab .x-button.x-button-pressing .x-button-icon {18 background-color:#2A8BBE;19 } 使用示例：
1 Ext.define('app.view.action.List', { 2 alternateClassName: 'actionList', 3 extend: 'ux.PageTab', 4 xtype: 'actionList', 5 requires: ['ux.plugin.SwipeTabs', 'app.view.action.TabList'], 6 config: { 7 cls: 'tab', 8 plugins: 'swipetabs', 9 items: [{10 title: '校园活动',11 xtype: 'actionTabList',12 store: 'actionCampusList'13 },14 {15 title: '其它活动',16 xtype: 'actionTabList',17 store: 'actionCampusList'18 },19 {20 title: '讲座报告',21 xtype: 'actionTabList',22 store: 'actionCampusList'23 },24 {25 title: '公益活动',26 xtype: 'actionTabList',27 store: 'actionCampusList'28 },29 {30 title: '比赛活动',31 xtype: 'actionTabList',32 store: 'actionCampusList'33 },34 {35 title: '招聘实习',36 xtype: 'actionTabList',37 store: 'actionCampusList'38 }, {39 title: '社团活动',40 xtype: 'actionTabList',41 store: 'actionCampusList'42 }]43 }44 }); 示例部分css：
1 .tab { 2 height:100%; 3 } 4 .tab .x-tabbar-dark { 5 background-image:none; 6 background-color:#D3DCE3; 7 padding:0; 8 border:0; 9 }10 .tab .x-tabbar-dark .x-tab {11 color:#677C8B;12 border:0;13 height:100%;14 border-radius:0;15 padding:0.8em 0.2em;16 }17 .tab .x-tabbar-dark .x-tab-active {18 background-color:transparent;19 background-image:none;20 border-bottom:1px solid #00A4FF;21 color:#060606;22 } 效果：
2013.9.6
优化PageTab内for循环结构
2014.11.7
修复bug，适配到2.4.1版本