extjs, ux - Managed iFrame

JavaScript算是被誤解蠻深的語言，很多人都認為JavaScript很容易，卻往往寫出一堆邏輯錯誤，但是功能符合的code，進而造成許多的memory leak，這點我也避免不了，於是就有人想到用iframe來解決，目前我在使用上確實幫我解決了不少memory leak的問題，所以，也安心的讓大家亂寫一通(即便他們很認真的寫還是寫得很亂)。
最簡單的iframe就是指定xtype和defaultSrc即可，而切換頁面則透過iframe的setSrc(url)。

Ext.onReady(function() {
  var viewport = new Ext.Viewport({
    renderTo: Ext.getBody(),
    layout: 'border',
    items: [{
      region: 'west',
      title: 'west',
      collapsible: true,
      width: 100,
      items: [{
        xtype: 'button',
        text: 'google',
        handler: function () {
          viewport.getComponent('center').setSrc('http://www.google.com');
        }
      },
      {
        xtype: 'button',
        text: 'nano chicken',
        handler: function () {
          viewport.getComponent('center').setSrc('http://www.blogger.com');
        }
      }]
    },
    {
      region: 'center',
      title: 'center',
      id : 'center',
      xtype: 'iframepanel',
      defaultSrc: 'http://www.blogger.com'
    }]
  });
});

這樣每一個iframe的網頁都是一個獨立的網頁，即便，parent頁面已經有include extjs了，iframe裡面的網頁如果有用到extjs，還是需要在include一次。
參考資料：
http://www.extjs.com/learn/Extension:ManagedIframe
http://www.extjs.com/forum/showthread.php?t=71961
http://code.google.com/p/managediframe/