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