Sencha Touch Slide-nav无法从其他视图返回工作

Question

我正在使用http://innofied.com/simplest-slide-navigation-with-sencha-touch-2-2/作为导航幻灯片菜单。它工作得很好，但是当我移动到下一页并返回时，幻灯片导航不起作用。

请帮帮我。我的代码如下..

ViewPort.js

Ext.define（'SpinAction.view.Viewport'，{     extend：'Ext.Panel'，     xtype：'app_viewport'，

requires: [
'Ext.TitleBar'
],

config: {
    fullscreen: true,
    layout: 'hbox',
        items: [
            {
                xtype: 'main',
                cls: 'slide',
                width: '100%'
            }, 
            {
                xtype: 'navigation',
                width: 250
            }
        ]
 }

}）;

Header.js

Ext.define('SpinAction.view.Header', {
    extend: 'Ext.Panel',
    xtype: 'main',

    config: {
    },
    initialize: function () {

        this.callParent(arguments);

        var titleBar=
        {
                xtype: 'titlebar',
                docked: 'top',
                height:40,                
                title: 'SpinAction',                
                items: [
                {
                    xtype: 'button',
                    align: 'left',
                    name : 'nav_btn',
                    iconCls : 'list',
                    ui : 'plain'
                },
                {
                    xtype: 'button',
                    iconCls: 'more',
                    align: 'right',
                    name : 'more_btn',
                }
              ]                
        };
        this.add([titleBar]);
    },


});

Navigation.js

Ext.define('SpinAction.view.Navigation', {
    extend: 'Ext.List',
    xtype: 'navigation',
    requires : ['Ext.data.Store'],



    config: {
        store: 
        {
            xtype: 'sidebarStore'
        },

        grouped: true,      
        cls : 'nav-list',
        itemTpl: '<div class="sidebar-menu-item">\
                    <div class="sidebar-menu-item-text">{name}</div>\
                 </div>'
    }
});

Home.js（Controller）

Ext.define('SpinAction.controller.Home', {
    extend: 'Ext.app.Controller',
    config: {
        routes: {
            'homePage': 'setHomePage'
        },
        refs: {
            main: 'main',
            navigation: 'navigation',
            navBtn: 'button[name="nav_btn"]',
            addBtn: 'button[name="add_btn"]',
            popupView: {
                autoCreate: true,
                selector: '#newProjectPopUpBox',
                xtype: 'newProjectPopUpBox'
            },
        },
        control: {
            navBtn: {
                tap: 'toggleNav'
            },
            addBtn: {
                tap: 'onMybuttonTap'
            },
            navigation: {
                itemtap: function(list, index, target, record) {
                    this.toggleNav();
                    if (index == 3) {
                        this.redirectTo('projects');
                    }
                }
            }
        },
    },
    setHomePage: function() {
        console.log('home');
        var view = Ext.create('SpinAction.view.Viewport');
        Ext.Viewport.setActiveItem(view);
        view.show();
    },
    onMybuttonTap: function(button, e, options) {
        var myProjects = Ext.create('SpinAction.view.NewProject');
        Ext.Viewport.setActiveItem(myProjects);
        myProjects.show();
    },
    /**
     * Toggle the slide navigation view
     */
    toggleNav: function() {
        var me = this,
            mainEl = me.getMain().element;
        console.log(me);
        if (mainEl.hasCls('out')) {
            mainEl.removeCls('out').addCls('in');
            me.getMain().setMasked(false);
            console.log("out");
        } else {
            mainEl.removeCls('in').addCls('out');
            me.getMain().setMasked(true);
            console.log("in");
        }
    }
});