sencha touch tabsidebar 源码扩展

先上图看效果

没错,这是一个sencha touch 项目,而这里的右边推出效果(下文叫做tabsiderbar),使用插件tabsiderbar来扩展的.

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

这里的插件实现的效果为:工具栏点击,从左边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"
        }

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 State
            sidebar.setState('open');
            sidebar.setHidden(false);
            // run the opening animation
            Ext.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 State
            sidebar.setState('closed');
            // run the closing animation
            Ext.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();
    },

3,toggleByRight代码

    /* --------------------------------------- BUTTON --------------------------------------- */
    /**
     * create the indicator
     */
    createIndicator: function () {
        if (this.getIndicator() !== false) {
            // Set the text on the button
            var 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());
        }
    }

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");
                                    }
                                }
                            }
                        ]
                    }
                );

至此,欢迎大家拍砖;

这里又做了一个手指跟随的扩展

            //手指滑动事件
                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);