Is it possible to declare Ext.Component as global variables?

| | August 7, 2015

I’ve faced with this problem many times when optimize my Sencha Touch 2 apps.

It’s obvious that I should keep the DOM light-weighted, my application contains an Ext.TabBar and a main Ext.Container above. Everytime when switch from a view to another, I simply remove current view and add new view to that Container.

But the problem is, there are some views which have customized data. I mean they have inner data such as html content, filtered store records, etc. When I remove them from my main Container, I want to somehow save their “states” to a global variable, for example: I’m doing an e-Commerce app with products with details. When remove details panel from main container, I want to do something like this:

var saved_detail_panel = mainContainer.getActiveItem();

if I could do that, later when I want to add that detail panel back to main container, I can simply use:

mainContainer.add(saved_detail_panel);

I’ve tried many times but could not find one that works yet.

Highly appreciate for any helps. Thank you.

Updated:
When I put this code in my event handler in a controller:

var temp = Ext.create('taxi.view.location.LocationPanel', {showAnimation: null});
taxi.main_container = temp;

It works well but is not performant. The thing I want to do is to create it once only in my app.js, like this:

launch: function(){
var temp = Ext.create('taxi.view.location.LocationPanel', {showAnimation: null});
};

and only use this in Controller:

taxi.main_container = temp;

It works for the first time. But in the second time, it shows this error:

Uncaught TypeError: Cannot call method 'replaceCls' of null 

4 Responses to “Is it possible to declare Ext.Component as global variables?”

  1. Try to add autoDestroy: false in your view.

    Ext.define('JiaoJiao.view.personal.Card', {
    
     extend: 'Ext.NavigationView',
     xtype: 'personalContainer',
    
     config: {
    
         tab: {
             title: '个人',
             iconCls: 'user',
             action: 'personalTab'
         },
    
         autoDestroy: false,
    
         items: [
             {
                 xtype:'personal',
                 store: 'Personals'
             }
         ]
     }
    });
    
  2. another soln is caching ur views. it is not actually caching.
    first add an array to your application like .

    Ext.application({
    name: 'app',
    
    
    viewCache: [],
    
    viewCacheCount: 0,
    
    
    launch: function () {     
    
        this.viewCache.push("app init......."); // push your view
    
    }
    });
    

    and this can be retrive inside of any controller something like

    ths.getApplication().viewCache.pop();      //pop your view
    

    I dont know it might create some problem in case of some views/components that are auto destroyable.

  3. try this,

    var appNS = new Ext.application({
    
        name: 'app',
        //others
    
        launch: function () {    
            appNS.SavedValue = 'getting start..........';       
        },
    
        //others
    
    });
    

    and then you can use it inside of controller

    console.log(appNs.SavedValue);
    

    i hope it might be helpful.

  4. Can you use the app’s “global namespace”? Then you can reference MyApp.savedValue anywhere in your app?

    Ext.application({
        name: 'MyApp',
    
    //    views: [],
    //    models: [],
    //    stores: [],
        controllers: ['Main'],
    
        launch: function() {
            MyApp.savedValue = "Hello word";
            Ext.Viewport.add(Ext.create('Sencha.view.tablet.MainView'));
        }
    });
    

    One other idea in the Sencha examples is in the KitchenSink demo. In app/controllers/Main.js, they use a view cache, which is setup in the config:{} and accessed via a getter/setter. I think the main controller always persists so your cache is always available. In fact, aren’t all of your controllers persist if they’re loaded in the app.js?

     controllers: ['Main','FooController', 'BarController'],
    

    Snippets from: app/controllers/Main.js

    config: {
            /**
             * @private
             */
            viewCache: [], // Accessed via getViewCache(), setViewCache()
    
            ...
    },
    
     createView: function(name) {
            var cache = this.getViewCache(), // Implied getter
                ln = cache.length,
                limit = 20, // max views to cache
                view, i, oldView;
    
           // See if view is already in the cache and return it
            Ext.each(cache, function(item) {
                if (item.viewName === name) {
                    view = item;
                    return;
                }
            }, this);
    
            if (view) {
                return view;
            }
    
            // If we've reached our cache limit then remove something
    
            if (ln >= limit) {
                for (i = 0; i < ln; i++) {
                    oldView = cache[i];
                    if (!oldView.isPainted()) {
                        oldView.destroy();
                        cache.splice(i, 1);
                        break;
                    }
                }
            }
            // Create the view and add it to the cache
            view = Ext.create(name);
            view.viewName = name;
            cache.push(view);
            this.setViewCache(cache); // Implied setter
    
            return view;
        },  
    

Leave a Reply