是否可以將Ext.Component聲明為全局變量？

Question

優化我的Sencha Touch 2應用程序時，我曾多次遇到此問題。

很明顯，我應該保持DOM重量輕，我的應用程序包含一個Ext.TabBar和主Ext.Container以上。 每次從一個視圖切換到另一個視圖時，我只需刪除當前視圖並向該Container添加新視圖。

但是問題是，有些視圖具有自定義數據 。 我的意思是它們具有html內容，已過濾的商店記錄等內部數據。當我從主容器中將其刪除時，我想以某種方式將其“狀態”保存到全局變量中，例如：具有產品詳細信息的Commerce應用程序。 從主容器中刪除詳細信息面板時，我想執行以下操作：

var saved_detail_panel = mainContainer.getActiveItem();

如果可以的話，以后當我要將詳細信息面板添加回主容器時，我可以簡單地使用：

mainContainer.add(saved_detail_panel);

我已經嘗試了很多次，但是找不到一個可行的方法。

非常感謝您的幫助。 謝謝。

更新 ：當我將此代碼放在控制器的事件處理程序中時：

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

它運作良好，但性能不佳。 我要做的是僅在我的app.js中創建一次，如下所示：

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

並且僅在Controller中使用它：

taxi.main_container = temp;

它是第一次工作。 但是在第二次，它顯示此錯誤：

Uncaught TypeError: Cannot call method 'replaceCls' of null 

Answer 1

您可以使用應用程序的“全局名稱空間”嗎？ 然后，您可以在應用程序中的任何位置引用MyApp.savedValue嗎？

Ext.application({
    name: 'MyApp',

//    views: [],
//    models: [],
//    stores: [],
    controllers: ['Main'],

    launch: function() {
        MyApp.savedValue = "Hello word";
        Ext.Viewport.add(Ext.create('Sencha.view.tablet.MainView'));
    }
});

Sencha示例中的另一個想法是在KitchenSink演示中。 在app / controllers / Main.js中 ，他們使用視圖緩存，該緩存在config：{}中設置，並通過getter / setter訪問。 我認為主控制器始終存在，因此您的緩存始終可用。 實際上，如果不是將所有控制器都加載到app.js中，它們是否仍然存在？

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

來自以下代碼段： 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;
    },

Answer 2

嘗試這個，

var appNS = new Ext.application({

    name: 'app',
    //others

    launch: function () {    
        appNS.SavedValue = 'getting start..........';       
    },

    //others

});

然后可以在控制器內部使用它

console.log(appNs.SavedValue);

我希望這會有所幫助。

Answer 3

另一種解決方案是緩存您的視圖。 它實際上不是緩存。 首先將數組添加到您的應用程序中，例如。

Ext.application({
name: 'app',


viewCache: [],

viewCacheCount: 0,


launch: function () {     

    this.viewCache.push("app init......."); // push your view

}
});

這可以在任何控制器內部檢索，例如

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

我不知道在某些可自動銷毀的視圖/組件的情況下可能會產生一些問題。

Answer 4

嘗試在您的視圖中添加autoDestroy: false 。

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'
         }
     ]
 }
});