先上圖看效果

?

沒錯,這是一個sencha touch 項目,而這里的右邊推出效果(下文叫做tabsiderbar),使用插件tabsiderbar來擴展的.

插件js下載地址:http://www.m-gd.com/sencha-touch-sidebar-component/

這里的插件實現(xiàn)的效果為:工具欄點擊,從左邊open半個頁面出來

而我們如果我們要使這個頁面從郵編出來怎么辦呢?

這里我將Siderbar.js中擴展了一下,具體如下(這里只貼擴展后的代碼和主要思路):

1,給indicator對象添加自定義屬性startBy

/*** @cfg {Object || Boolean} indicator* if false, no idicator is shown, otherwise this defines the indicator*/indicator: {itemId: 'mgd-tab-sidebar-button',/*** @cfg {String} text* the button text*/text: '',/*** @cfg {String} #closeStateCls* add additional classes to the button*/openCls: '',/*** @cfg {String} #openStateCls* add additional classes to the button*/cls: 'mgd-tab-sidebar-button',/*** @cfg {String} btnPressedCls* add additional classes to the pressed button state*/pressedCls: 'mgd-tab-sidebar-button-pressing',/*** @cfg {Number} [left=0]* The absolute left position of this Component*/ // left: 0,/*** @cfg {Number} top* The absolute top position of this Component*/top: 3,/*** @cfg {Number} zIndex* The z-index to give this Component when it is rendered*/zIndex: 5,//添加自定義屬性startBy(名稱自取)startBy:"left"} View Code

?2,擴展toggle函數為兩個:toggleByLeft(默認就是這個方法)和toggleByRight

/* ---------------------------------------擴展 Show By Right ACTION --------------------------------------- */toggleByRight: function (button) {config.showToast();console.log('[tab.Sidebar][toggle] tapped the button');console.log("擴展注釋:---toggleByRight");button = button || this.getIndicator();var activeView = Ext.Viewport.getActiveItem(),sidebar = button ? button.config.sidebar : this;var width = sidebar.getWidth();var windowWidth=window.innerWidth; //初始位置從瀏覽器窗口的最右端開始if (sidebar.getState() === 'closed') {// set Statesidebar.setState('open');sidebar.setHidden(false);// run the opening animationExt.Anim.run(sidebar, 'tabsidebar', {duration: sidebar.getDuration(),fromX: windowWidth});if(sidebar.getMoveActiveView())Ext.Anim.run(activeView, 'tabsidebar', {duration: sidebar.getDuration(),toX:-width});if (button){Ext.Anim.run(button, 'tabsidebar', {duration: sidebar.getDuration(),toX:-width});// show a different symbol in the button button.addCls(button.config.openCls);}} else {// set Statesidebar.setState('closed');// run the closing animationExt.Anim.run(sidebar, 'tabsidebar', {out: true,duration: sidebar.getDuration(),toX: windowWidth});if(sidebar.getMoveActiveView())Ext.Anim.run(activeView, 'tabsidebar', {out: true,duration: sidebar.getDuration(),fromX: -width});if (button){Ext.Anim.run(button, 'tabsidebar', {out: true,duration: sidebar.getDuration(),fromX: -width});// revert to original symbol in the button button.removeCls(button.config.openCls);}}config.hideToast();}, View Code

?3,toggleByRight代碼

/* --------------------------------------- BUTTON --------------------------------------- *//*** create the indicator*/createIndicator: function () {if (this.getIndicator() !== false) {// Set the text on the buttonvar button = this.getIndicator();button.xtype = 'button';//button.handler = this.toggle;/************擴展代碼開始************/if(this.getIndicator().startBy=='left'){this.getIndicator().left=10;//設置按鈕位置靠左this.setLeft(0);//從左邊open,將siderBar靠左浮動(left=0),保持層靠邊不重疊button.handler = this.toggleByLeft;}else{this.getIndicator().right=10; //設置按鈕位置靠右this.setRight(0);//從右邊show,將siderBar靠左浮動(right=0),保持層靠邊不重疊button.handler = this.toggleByRight;}/************擴展代碼結束************/button.sidebar = this;Ext.Viewport.add(button);this.setIndicator(Ext.Viewport.down('#' + button.itemId));// Set the handler on the button to listen for opening/closing and the pressed state. // createdButton.on('touchstart', 'addPressedCls', this);Ext.Viewport.on('orientationchange', this.orientationchange, this.getIndicator());}} View Code

4,需要注意的地方:

　　①open這個tabsiderbar的時候,注意tabsiderbar的浮動方向(代碼2中說明)

　　②使用方式只需要配置startBy屬性

　　

Ext.Viewport.add({xtype: 'tabsidebar',id: 'tabsb',scrollable: null,indicator: {text: '更多',iconMask: false,width: '65px',startBy: "right" //使用自定義屬性,使得該tabsiderbar從左邊出來還是右邊 },header: '更多',items:[{xtype: "list",scrollable: null,id:"moreList_id",height:"600px",store: {fields: ['mid','text'],data: [{mid:'1',text: '分享應用'},{mid:'1',text: '關于我們'},{mid:'1',text: '更新版本'},{mid:'1',text: '清除緩存'},{mid:'1',text: '退出應用'}]},itemTpl: "<div>{text}</div>",listeners:{painted:function(sb){sb.setCls("moreList_cls");}}}]}); View Code

至此,歡迎大家拍磚;

?

這里又做了一個手指跟隨的擴展

//手指滑動事件main.on("swipe", function(e, target, options, eOpts) {if (e.direction === 'left' && e.distance >= 20) {if(Ext.getCmp("tabsb").getState()=="closed"){Ext.getCmp("tabsb").toggleByRight();}} else if (e.direction === 'right' && e.distance >= 20) {if(Ext.getCmp("tabsb").getState()=="open"){Ext.getCmp("tabsb").toggleByRight();}}},this);

?

?

轉載于:https://www.cnblogs.com/Brose/p/sencha_touch_tabsiderbar_right.html

總結

以上是生活随笔為你收集整理的sencha touch tabsidebar 源码扩展的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。