• Prototype+scriptaculous, jQuery, YUIとの連携が可能。もちろん単体でも動作可能
• 開発ドキュメントがよくできている(最低限の英語力と、既存の多言語ドキュメントが読めれば可)
• UIを劇的に変更可能で、割と容易にRIAを実現することが可能
• その他、今後紹介していく予定、、、

といったことが挙げられます。

現在は、RC1ということで一部怪しいと思われる(または、使い方を間違っているだけなのかも？)部分がありますが、基本的な使い方をする分では十分にその機能を発揮させることが可能です。

なお、本体は extjs.com からダウンロードしてください。また、API Referenceは extjs.com/deploy/dev/docs/ にあります。

では、ダウンロードしたファイルを展開してみてください。展開すると、下記のようなディレクトリ構成になっていることがわかります。

/
├─build
│  ├─legacy
│  │  └─layout
│  ├─core
│  ├─data
│  ├─locale
│  ├─widgets
│  │  ├─form
│  │  ├─grid
│  │  ├─tree
│  │  ├─tips
│  │  ├─layout
│  │  └─menu
│  ├─dd
│  ├─yui
│  ├─state
│  ├─util
│  └─adapter
├─package
│  ├─form
│  ├─grid
│  ├─button
│  ├─datepicker
│  ├─data
│  ├─tree
│  ├─dragdrop
│  ├─qtips
│  ├─tabs
│  ├─dialog
│  ├─menu
│  └─toolbar
├─source
│  ├─legacy
│  │  └─layout
│  ├─core
│  ├─data
│  ├─locale
│  ├─widgets
│  │  ├─form
│  │  ├─grid
│  │  ├─tree
│  │  ├─tips
│  │  ├─layout
│  │  └─menu
│  ├─dd
│  ├─yui
│  ├─state
│  ├─util
│  └─adapter
├─docs
│  ├─output
│  └─resources
├─adapter
│  ├─ext
│  ├─prototype
│  ├─yui
│  └─jquery
├─examples
│  ├─message-box
│  │  └─images
│  ├─feed-viewer
│  │  └─images
│  ├─form
│  ├─simple-widgets
│  │  └─images
│  ├─desktop
│  │  ├─js
│  │  ├─wallpapers
│  │  ├─css
│  │  └─images
│  │      └─taskbar
│  │          └─black
│  ├─grid
│  │  └─images
│  ├─core
│  ├─resizable
│  ├─debug
│  ├─view
│  │  └─images
│  │      └─thumbs
│  ├─organizer
│  ├─tree
│  │  └─images
│  │      └─thumbs
│  ├─locale
│  ├─panel
│  ├─forum
│  ├─state
│  ├─layout
│  │  └─images
│  ├─dependency
│  ├─tabs
│  ├─slider
│  ├─shared
│  │  ├─icons
│  │  │  └─fam
│  │  └─screens
│  ├─tasks
│  │  ├─db
│  │  └─images
│  ├─portal
│  ├─menu
│  └─window
└─resources
    ├─legacy
    ├─css
    └─images
        ├─gray
        │  ├─button
        │  ├─panel
        │  ├─tabs
        │  ├─window
        │  ├─toolbar
        │  └─qtip
        ├─vista
        │  ├─grid
        │  ├─sizer
        │  ├─basic-dialog
        │  ├─layout
        │  ├─tabs
        │  ├─toolbar
        │  └─qtip
        └─default
            ├─form
            ├─grid
            ├─button
            ├─sizer
            ├─tree
            ├─box
            ├─panel
            ├─dd
            ├─layout
            ├─tabs
            ├─shared
            ├─progress
            ├─editor
            ├─menu
            ├─window
            ├─toolbar
            └─qtip

それぞれの説明は割愛しますが、docsやexamplesは非常によく使うので、デバッグ環境などには最初はそのまま入れておくことをお勧めします。また、docsについては、先ほど説明したAPI Referenceと同じものが入ってます。Web経由で表示させれば、非常に高速にマニュアルを参照することができるので、ブックマークをこちらに変更することをお勧めします。

なお、正直なところ現時点ではサンプルもあまりないですし、ちょっと細かいことをしようと思うと、API Referenceとexamples配下のデモを参考にしながら、探っていくしかないため非常に時間がかかります。また、書式チェックが厳しいため、Configの区切り文字 "," が最後にあるだけでエラーになってしまったりと、適当にコピペをしている人間にとってはミスが誘発されやすいのが玉に瑕ではあります。

では、今回は基本的な使い方の導入として、ヘッダ部分での宣言から見ていこうと思います。利用できるファイルは多々あるのですが、通常の使い方としては下記ファイルを使うことを宣言すればOKです。

<script type="text/javascript" src="/js/ext/adapter/ext/ext-base.js"><script>
<script type="text/javascript" src="/js/ext/ext-all.js"></script>
<script type="text/javascript" src="/js/ext/source/locale/ext-lang-ja.js" charset="UTF-8"></script>

※ src="/js/ext" については、各自の環境に合わせてください。

ここで、/source/locale/ext-lang-ja.js を読み込んであげることで、ある程度までのリソースが日本語になります。ただ、charset="UTF-8" を指定しないと、日本語になってくれませんでした。元々のHTMLファイルのエンコーディングやcharsetに依存するかもしれませんので、注意してください。

あと、デフォルトで用意されているCSSを利用することも必要です。そのためには、

<link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css">

を記述してください。注意事項として、Extを適用しない要素に至るまで、このCSSの効果が有効になってしまい、なかなか大変です。まぁ、今回は説明のためにと割り切ってください。
※ いろいろと方法はありますので、また次回以降に説明します。

と、今回はここまでにします。次回以降をお楽しみに。

名古屋のWebシステム開発・ネットワーク構築会社 コネクティボへ