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

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         * @private
21         * @accessor
22         */
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: direction
77             },
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版本