From Learn About the Ext JavaScript Library

Contents 1 はじめに 1.1 シナリオ1 - 初心者 1.2 シナリオ2 - プロ 2 そのやり方は？

はじめに

シナリオ1 - 初心者

あなたはExtについて耳にし、online examplesを眼にし、APIを読み始めたところです。実のところ、あなたはExtで遊び始めたくてむずむずしていますが、これで遊ぶためのテストサーバを手にしていません！

シナリオ2 - プロ

あなたはAPIを掘り進め、見るからに面白そうでたった今試したくてたまらないメソッドを見かけましたが、しかしその一つのメソッドをテストするためだけに、適切なリソースを全て含むテストページを手早く書き上げようという気にはどうしてもなれません。

いずれの理由にせよ、ここにテストサーバを必要としない、今すぐExtで遊ぶことのできる手っ取り早い方法があります。これをするにはFirebugのインストールされたFirefoxが必要になるでしょうが、しかし実際にはまだインストールされていなければ、自分のためだと思って今すぐインストールしてください！

そのやり方は？

• Ext API Documentationを起動してください。たぶん、既に開いたことがあるでしょう。
• F12を叩いてFirebugコンソールを開いてください（Firebugは正しく動作していますか？）
• もしFirebugコンソールが'>>>'のような何かの見られるシングルラインであれば、下部の右手の角にある小さな上向き矢印をクリックして、コンソールをマルチラインバージョンに拡張してください。
• 1行目に以下を入力し、Ctrl-Enterを叩いて実行してください：

Ext.get(document.body).update('<div id="test"></div>');

上の行は、DOMボディ全体を単一のdiv（ID test 付き）で置き換えます。bodyの内容はなくなりますが、しかしExtライブラリはロードされたままで、あなたがこれで遊ぶ準備ができています。

今、あなたはExt.Panel APIをブラウズしていて、新しいPanelオブジェクトを作成するのが現にどれくらい簡単であるかを見たかったと仮定しましょう。

今、あなたがExt.Panel APIをブラウズしていて、新しいPanelオブジェクトの作成がどれくらい簡単であるか、自分の目で確かめたかったと仮定しましょう。Firebugのコードに以下の行を追加します：

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
	renderTo: 'test',
	width: '200px',
	title: 'My Title',
	html: 'My HTML content'
});

再度Ctrl-Enterを叩くと、ほら、ページ上に新しいパネルが作成されました。

OK、今度は別のオプションを加えたら、例えばcollapsibleプロパティを可能にしたら、何が起こるか知りたいですね。あなたのコードはまだfirebug中に居座ってますから、新しい設定オプションを持つ追加行を加えます：

Ext.get(document.body).update('<div id="test"></div>');
new Ext.Panel({
	renderTo: 'test',
	width: '200px',
	title: 'My Title',
	html: 'My HTML content',
	collapsible: true
});

Ctrl-Enterを叩けば、すぐにcollapsibleなトグルがパネルの右手角に現れるのを見ることができます。

あなたがCtrl-Enterを叩くたびに、最初の行はそれまでの実行であなたがDOMに加えた何もかも削除しますので、このおかげでキャンバスはきれいに保たれます。これは簡単なトリックですが、しかし、ありあまる利用可能な設定オプションがすることを直接見たいときには、信じられないほど便利です。

最初の行のupdate()メソッドに文字列を渡すことで、必要なだけたくさんのHTMLを追加することもでき、それからExt APIを探検するために、同様に好きなだけたくさんのJavascriptを書くことができます。

さあ、自分自身でAPIを遊び始めてください！

• Ext Programmer's API Documentation
• Ext User Forums