ExtJSよろよろ歩く

本論文はExtJS公式サイトから転載し、原作者が公式文書から翻訳したものである(クリックして原文を調べます)
 
第一歩-入門は、Extを聞いたことがあると思います.オンラインプレゼンテーションを見て、APIの文書を読んでみました.しかし、複雑なAPIの文書に直面して、あなたはどのように手をつけませんか?
二番目のステップ-APIのドキュメントを参照したことがあります.すぐに試したい機能を見つけました.混雑したウェブページのソースコードに直面して、簡単なテストページをどうやって開始しますか?では…
あなたの目標が何であれ、本明細書に従ってExtを迅速に使用することができます.いいえ、サーバーを構築しなくてもいいです.必要なのはFirefoxブラウザとFirebugデバッグプラグインだけです.まだインストールしていないなら、今はいいチャンスです.
第三ステップ-牛刀小試しExt APIドキュメントを開けてみて、出発しました.F 12をクリックして、Firebugコンソールを開きます.あなたのfirebugコンソールが単一の行モード('>>>>で始まる場合は、右下の赤い上矢印をクリックして、複数行の編集モードをオンにしてください.次のコードを入力してCtrl-Enterを叩いて実行します.

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

上の行のコードの役割は、現在のDOM body要素を一つのIDでtestのdiv要素に置き換えることです.先ほどのAPI文書は削除されましたが、Extコードは有効です.いつでもサービスします. 
今、簡単にパネル要素(Panel)を追加したいと思いますが、Ext.PanelのAPIの繁雑な説明には無力です.これらのコードを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を叩きます.ハイ!パネル要素は既に誕生しました.
いいですが、もしいくつかのオプションを修正したら?先ほどのコードを下のコードで置換します.

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を叩きます.どうですか?伸び縮みできるパネルを配置したらいいです.(注意パネル右上の小さなアイコン)
Ctrl-Enterを押すたびに、最初の行のコードは既存の内容を削除します.そうすると、きれいなデバッグ環境があります.これは簡単なテクニックです.いろいろな配置オプションを試してみてもいいです.
udate()関数に必要なHTMLコードを追加できます.そして、多かれ少なかれJavascriptを書いてExt APIを探求します.
まだ何を待ちますか?今から直接Extアプリを実践してみましょう.
Ext Programer’s API Dcumentation Ext User Forums