リンクを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;
});
});
}

