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版本