|
|
|
|
|
|
|
|
|
|
|
javascriptのデバッグというとFireFoxプラグインのfirebugを思い浮かべます。そのとおり上記チュートリアルもfirebugを使ったデバッグです。もちろんこのブログで紹介しているExtJS関連のポストもfirebugを使ってデバッグしてはいますが、あまり使い込んでおらず適宜ブレークポイントを置いて変数なんかをウォッチする程度のものでした。知らなかったのはコンソールにスクリプトを直接書いて実行させることが出来るってことです。え・・・それって常識・・・とかドン引きされることかと思いますが、コンソールにスクリプトを直接書いて実行出来るらしいですよ！（同じことを２度言ってみました）（恥ずかしい子！）
恥ずかしい子はどうでもよいのですが、上記ページのチュートリアルを引用してキャプチャをいくつか追加しながらポストしたいと思います。
ココまで読んでいる方なら以下の資材はお持ちかと思いますが一応リンクしておきます。 firefoxをインストールしてfirebugを入れたらfirefoxでExt2.1-API Dcumentationを開きます。なぜこのページを開くのかと言いますと理由は単純でExtJSが全てロードされているためです。
開きましたら図のようにfirebugを立ち上げます。
ツール＞Firebug＞Open Firebugで開きます。
次にEnable FirebugをクリックしてこのExt2.1-API Dcumentationページをデバッグできる状態にします。
さらにConsoleタブをクリックして、コンソールを開きます。右ペインの複数行入力できるコンソールが開いていなければ右下のアイコンをクリックしてペインを開きます。
開いたらこのコンソールに以下のコードを入力し、RunをクリックするかCTRL+ENTERを押下します。
Ext.get(document.body).update('<div id="test"></div>');
このコードはページのdocument.bodyを取得し、そのinnerHTMLをdiv id="test"で更新すると言うものです。HTMLタブをクリックしてbodyノードを開くとinnerHTMLが<div id="test"></div>になっていることが確認できます。同時に画面からコンテンツが消えます。コンテンツは消えますが、ExtJSのライブラリはロードされたままですので、コイツを利用してスクリプトのテストが行えるんです。ためしに、
new Ext.Panel({
renderTo: 'test',
width: '200px',
title: 'My Title',
html: 'My HTML content'
});
をコンソールにコピペ（追記）してCTRL+ENTERを押下します。すると、Ext.Panelが表示されます！
renderTo: 'test',
というコンフィグオプションでdiv id="test"をレンダリング先としていますので、１行目は消さないでください。続けて、html: 'My HTML content'というコンフィグオプションの直後に
,collapsible : Boolean
を挿入してみます。地味ですが、パネルのタイトルバー右に[▲]アイコンが表示され、パネルのボディが開いたり閉じたり出来るようになりました！ということはAPI DocumentationにあるExtクラスのメソッドや、コンフィグなどがリアルタイムにどんなものなのか確認できるようになったということですね。うわーすげー便利だ。では次にrenderTo: 'test',と言う箇所を// でコメントアウトします。
//renderTo: 'test',
画面からパネルが消えますので,collapsible : Booleanの直後に以下のコードを挿入します。
,x: 100
,y: 100
,renderTo: Ext.getBody()
,floating: true
,frame: true
,height: 200
,draggable: {
insertProxy: false,
onDrag : function(e){
var pel = this.proxy.getEl();
this.x = pel.getLeft(true);
this.y = pel.getTop(true);
var s = this.panel.getEl().shadow;
if (s) {
s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());
}
},
endDrag : function(e){
this.panel.setPosition(this.x, this.y);
}
}
すると、パネルがドラッグ＆ドロップできるようになりました！というわけで、日本語チュートリアルと全然変わりありませんが知ってるのと知らないのでは大違いなのでポストしてみました。何が一番びっくりしたのかと言いますと、このコンソールの使い方がgetfirebug.comにデカデカと載っていたことです。あーびっくりした。（しらじらしい）