No text visible the second time a view is set active

[English]

I have an MVC application. The controller listens to the "show" event, and translates some text on the view - setting labels for buttons, and titles for toolbars. I have written a custom class to do the actual translation.

This works perfectly the first time the view is shown, but when a different view is made the activeItem, and then this view is made active again (the show event does fire), all the text items are empty.
I have debugged the code, and the translations are working perfectly (I can console.log them). In fact, I have even taken the translations completely out of the equation, and merely set the text to a value - same effect.

Here is the view:

Ext.define("lmsmobile.view.Catalog", {
    extend: 'Ext.Container',
    alias: 'widget.Catalog',
    requires: ['Ext.TitleBar', 'Ext.Button'],
    config: {
        layout: 'card',
        defaults: {
            scrollable: true
        },
        baseCls: 'x-venu-background',
        items: [
            {
                xtype: 'container',
                baseCls: 'x-venu-background',
                items: [
                    {
                        xtype: 'titlebar',
                        //title: 'Course Catalog'
                    }
                ],
                html: 'First Container'
            },
            {
                xtype: 'container',
                items: [
                    {
                        xtype: 'titlebar',
                        //title: 'Curricula'
                    }
                ],
                html: 'Second Container'
            },
            {
                xtype: 'toolbar',
                docked: 'bottom',
                height: '70px',
                items: [
                    {
                        xtype: 'button',
                        iconCls: 'home',
                        iconMask: true,
                        cls: 'x-iconalign-top',
                        //text: 'home',
                        action: 'home'
                    },
                    {
                        xtype: 'spacer'
                    },
                    {
                        xtype: 'button',
                        iconCls: 'catalog',
                        iconMask: true,
                        cls: 'x-iconalign-top',
                        action: 'catalog'
                        //text: 'Catalog'
                    },
                    {
                        xtype: 'button',
                        iconCls: 'curricula',
                        iconMask: true,
                        cls: 'x-iconalign-top',
                        action: 'curricula'
                        //text: 'Curricula'
                    },
                    {
                        xtype: 'spacer'
                    },
                    {
                        xtype: 'button',
                        iconCls: 'docs2',
                        iconMask: true,
                        cls: 'x-iconalign-top',
                        action: 'allcourses'
                        //text: 'All Courses'
                    }
                ]
            }
        ]
    },
    initialize: function(){
        this.callParent();
    },
});

And here is the controller:

Ext.define('lmsmobile.controller.Catalog', {
    extend: 'Ext.app.Controller',
    config:{
        refs:{
            CatalogPage: 'Catalog',
            TitleBar: 'Catalog titlebar',
            HomeButton: 'Catalog button[action=home]',
            CatalogButton: 'Catalog button[action=catalog]',
            CurriculaButton: 'Catalog button[action=curricula]',
            AllCoursesButton: 'Catalog button[action=allcourses]'
        },
        control:{
            HomeButton:{
                tap: function(){
                    Ext.Viewport.setActiveItem('Home');
                    //this.destroy(true);
                }
            },
            CatalogPage: {
                show: function() {
                    this.TranslatePage();
                },
                scope: this
            }
        },
        Translations: null
    },
    launch: function() {
        this.callParent();
    },
    init: function(){
        this.callParent();
    },
    TranslatePage: function(){
        var Translator=Ext.create('lmsmobile.Translator');
        //############## Add the string to be translated here ###########################
        Translator.addString('coursecatalog');
        Translator.addString('catalog');
        Translator.addString('home');
        Translator.addString('curricula');
        Translator.addString('allcourses');
        //############ End of strings to translate ########################################
        Translator.Translate(function(Translations){
            controller=lmsmobile.app.getController('Catalog'); //Get a reference to this controller
            page=controller.getCatalogPage(); //Get a reference to the view.
            controller.setTranslations(Translations);
            Translator.destroy(); //Destroy the translator to free resouces


            //Translate the page
            controller.getTitleBar().setTitle(controller.getTranslations()['coursecatalog']);
            controller.getHomeButton().setText(controller.getTranslations()['home']);
            controller.getCatalogButton().setText(controller.getTranslations()['catalog']);
            controller.getCurriculaButton().setText(controller.getTranslations()['curricula']);
            controller.getAllCoursesButton().setText(controller.getTranslations()['allcourses']);
        });        
    }
});

When I inspect an element - say the "home" button, the first time, I see this for the label:

	
	
<span style="" class="x-button-label" id="ext-element-198">Home</span>
 The second time, I see this:

	
	
span style="display: none;" class="x-button-label"></span>
 I would surely appreciate anybody shedding some light on this for me.

[English]

Ugh. Found the problem. It's that in the controller that initially shows this view, I am creating a new instance of the view, but I'm not hiding and destroying this view properly.

Therefore, a new instance of this view is being created each time, but the controller still has the reference to the original one.

Destroying the view correctly, by adding this to the controller's HomeButton tap event:

Ext.Viewport.remove(this.getCatalogPage(), true);

Solves the problem.