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:


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

Highly appreciate for any helps. Thank you.

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: [
                 store: 'Personals'
  2. another soln is caching ur views. it is not actually caching.
    first add an array to your application like .

    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',
        launch: function () {    
            appNS.SavedValue = 'getting start..........';       

    and then you can use it inside of controller


    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?

        name: 'MyApp',
    //    views: [],
    //    models: [],
    //    stores: [],
        controllers: ['Main'],
        launch: function() {
            MyApp.savedValue = "Hello word";

    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;
            }, 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()) {
                        cache.splice(i, 1);
            // Create the view and add it to the cache
            view = Ext.create(name);
            view.viewName = name;
            this.setViewCache(cache); // Implied setter
            return view;

Leave a Reply