Question

Attached is a my controller file .. i basically want to switch views .. adding and removing a panel in a container with 2 buttons .. in the method for home and popular button i am using Ext.create again and again wouldnt that overload my application becoz iam not destroying my views iam adding and removing them .. My main question is how can i create global var ‘s for this situation like i create var homepanel = Ext.create just once and then i can reuse that var when i want to remove or add it from my mainContainer.. need serious guidance on this .. searched the whole documention but i dont have any clue about it

Ext.define('app.controller.MainController', {
extend: 'Ext.app.Controller',

config: {
    refs: {
        homeBtn: '#homeBtn',
        popularBtn: '#popularBtn',

        homePanel: '#homePanel',
        mainContainer: '#mainContainer'
    },
    control: {
        homeBtn:{
            tap: 'homeBtnAction'
        },
        popularBtn:{
            tap: 'popularBtnAction'
        }
    }
},


launch: function(app) {
    this.callParent(arguments);

    console.log("main launched");

    var mainCont = this.getMainContainer();
    var homepanel = Ext.create('app.view.Home.HomePanel');

    mainCont.add(homepanel);

    console.log("homePanelAdded");
},

homeBtnAction: function(){
    console.log("home page called");

    var mainCont = this.getMainContainer();
    var homepanel = Ext.create('app.view.Home.HomePanel');
    var popularpanel = Ext.create('app.view.Popular.PopularPanel');

    mainCont.remove(popularpanel);
    mainCont.add(homepanel);
},

popularBtnAction: function(){
    console.log("popular page called");

    var mainCont = this.getMainContainer();
    var homepanel = Ext.create('app.view.Home.HomePanel');
    var popularpanel = Ext.create('app.view.Popular.PopularPanel');

    mainCont.remove(homepanel);
    mainCont.add(popularpanel);
}
});

NOTE: Iam using Ext.define to create my views and using MVC structure.

Answer 1

Use this,

var homepanel = this.getHomePanel() || Ext.create('app.view.Home.HomePanel');

if this.getHomePanel() does not return anything it’ll create the panel for you. After that you’ll use the already created panel.

Other note, unless you are manipulating the buttons in some manner there is no need to give them an id or a ref.

Set up your button in your view like so

{
xtype : 'button',
text : 'Home Panel',
action : 'goHome'
}

then in the control section of your controller use this

'button[action=goHome] : 
 {
  tap: 'homeBtnAction'
 }