リンクをWindowダイアログ内に表示する

ページ内のリンクをページ遷移せずにExt.Windowダイアログを作成してその中に表示します。
Ext.Windowは移動や拡大縮小可能なwindowを生成します。その中にツールバーやテキストやGrid、タブなどを入れることもできます。
Windowを使わない場合はExt.Panelでもかまいません。
ここではいろんなことをしています。
・Ext.Windowを作成する
・Ext.Window.body.loadでリンクを読み込む
・タイトルを表示する
・ページ内のリンクを自動的にこのWindow内で開くようにする
・進む、戻るのナビゲーションをタイトルバーにtoolとしてつける
・同じリンクが指定された場合は、Ext.Windowダイアログを再利用する>closeActionをhide()にしてShow()する
・表示時に位置をランダムで変える
・他ドメインのサイトはgetLink(url)としてiframeで表示する(説明は省きます)

function getDoc(url,title)としてまとめます。
通常のリンクからは<a href='javascript:getDoc((url),(タイトル));void(0);'>とします。
読み込んだページに対しても、
genAjaxLink関数を使ってaタグすべてにこのWindow.body内で表示するようにします。 

まず、Ext.Windowダイアログを再利用するため、コードの冒頭で
var modules = new Array();
と宣言しておきます。
modules['window']にExt.windowオブジェクトを格納します。
modules['link']にナビゲーション用のリンク配列、
modules['linkInc']に現在表示している['link']の順番番号(0スタート)を入れます。

ちなみにExt.Windowの内容は、Ext.window.body.update('テキスト')で変更できます。
または、modules['window'].body.update('テキスト')((urlは「/」と「.」などを「-」に変更しています<IDに使えないため))
ID指定したい場合は、Ext.getCmp((ID)).body.update('テキスト')

function getDoc(url,title){
  //他ドメインの場合はgetLink(url)関数へ渡す
 if(url.indexOf('http://') > -1 || url.indexOf('https://') > -1) {
  getLink(url);
  return false;
 }
  //ID設定するためにurlを変更する
 did = url.replace(/[^0-9a-z]/ig, "\-"); //make id
  //タイトル表示用に長すぎるタイトルを切る
 //make longer Title is Short
 if(title.length > 60) {
  titlestr = title.substr(0,60) + "...";
 } else {
  titlestr = title;
 }
  //modules[url]が存在しない場合、Ext.Windowを作成する
 if(!modules[url]){
  modules[url] = new Array();
  modules[url]['window'] = new Ext.Window({
   id         :'doc_'+did,
   title      :titlestr,
   layout     :'fit',
   width      :580,
   height     :480,
   closeAction:'hide', //Closeアイコンの動作(隠す)。省略の場合、close(削除)
   maximizable:true, //最大化有効
   collapsible:true, //アイコン化有効
   autoScroll :true,
   bodyStyle  :'background-color: white;',
  //enableイベントに対する動作
   //Document Scripting after hook load callback(enable Event)
   listeners  :{'enable':function(){
    genAjaxLink($('#doc_'+did), this, null);
   }},
  //ツールバーに追加
   tools:[{ //make Titlebar Tool
    //左アイコンを追加。
    id:'left', //Back navigation
    hidden:true, //初期非表示
    //リンクが1以上の場合、「戻る」動作をする
    handler: function(event, toolEl, panel){
     if(panel['linkInc'] > 0) {
      panel['linkInc']--;
      link = panel['link'][panel['linkInc']];
      panel.body.load({url:link,params:{noTemplate:'blank'},callback:function(){panel.enable()},scripts:true});
      if(panel['linkInc'] == 0) panel.tools.left.hide();
      panel.tools.right.show(); //右アイコンを表示
     }
    }
   },{
    //右アイコンを追加。
    id:'right', //Next navigation
    hidden:true,
    handler: function(event, toolEl, panel){
     if(panel['linkInc'] < panel['link'].length - 1) {
      panel['linkInc']++;
      link = panel['link'][panel['linkInc']];
      panel.body.load({url:link,params:{noTemplate:'blank'},callback:function(){panel.enable()},scripts:true});
      if(panel['linkInc'] == panel['link'].length - 1) panel.tools.right.hide();
      panel.tools.left.show();
     }
    }
   }]
  });
  modules[url]['window'].show(); //Ext.Windowを表示する
  //ナビゲーション用リンク配列
  //preparations link Navigation
  modules[url]['window']['linkInc'] = 0;
  modules[url]['window']['link'] = new Array();
  modules[url]['window']['link'].push(url);
  link = modules[url]['window']['link'][modules[url]['window']['linkInc']];
  //body.loadを使い、読み込む
  //callbackでenable()イベントを発生させる<ページ内容を操作するのにここのcallbackでは描画が完了していないらしいので
  //Document Ajax load
  modules[url]['window'].body.load({url:link,params:{noTemplate:'blank'},callback:function(){modules[url]['window'].enable()},scripts:true});
  //初期表示時、位置をランダムで変える<常に中心に表示されるので
  //Randam window position
  box = modules[url]['window'].getBox(true);
  pos_x = Math.floor(5*Math.random()) * 8 + box.x;
  pos_y = Math.floor(5*Math.random()) * 8 + box.y;
  modules[url]['window'].setPosition(pos_x,pos_y);
 } else {
  //すでにmodules[url]が存在する(hide隠れている)場合、表示してloadしなおす
  modules[url]['window'].show();
  modules[url]['window'].body.load({url:url,params:{noTemplate:'blank'},callback:function(){modules[url]['window'].enable()},scripts:true});
 }
} 

読み込んだページに対してリンク(aタグ)すべてに対して動作を変更します。しなければ通常のページ遷移が発生します。
obj:ID指定されたjQueryオブジェクト
wobj:Ext.Windowオブジェクト
wflg:getDocに渡してWindow生成する

function genAjaxLink(obj, wobj, wflg) {
 //指定オブジェクト内のaタグすべてループする
 $('a', obj).each(function(){
  //urlがドメインのリンク(http://(自分のドメイン))であれば外す
  $(this).attr('href',$(this).attr('href').replace(serverpath,''));
  //無名関数を割り当てる
  $(this).click(function(){
  //他ドメインへのリンクであればgetLinkに渡す
   if($(this).attr('href').indexOf('http://') > -1 || $(this).attr('href').indexOf('https://') > -1) {
    getLink($(this).attr('href'));
   } else if(wflg == "-1") {
    //getDocに渡す
    getDoc($(this).attr('href'),$(this).attr('href'));
   } else {
    //ナビゲーション用リンク配列にurlを追加し、loadする
    link = $(this).attr('href')
    wobj['linkInc']++;
    wobj['link'].push(link);
    wobj.load({url:link,params:{noTemplate:'blank'},callback:function(){wobj.enable()},scripts:true});
    //左(戻る)アイコンを表示する
    wobj.tools.left.show();
   }
   return false;
  });
 });
}