イントロダクション

Sencha Ext JS / Sencha Touch プロフェッショナルプログラミングガイド
イントロダクション

Sencha Ext JSを利用したアプリケーションを作成ために必要な知識を養います。
って、書籍ではないので別にブログなんで、だらだら書きます（笑）

Sencha Ext JSのアプリケーション開発を始める上で、まず先に押さえたい点は、次の通りです。

• 通常のHTML文章とアプリケーションHTMLの違い
• JavaScriptの基本構文と特徴
• DOM
• CSSセレクター

概ね、これらをおさえていれば、Sencha Ext JS(以下、Ext JS)でアプリケーションを開発するための基礎知識は整っているでしょう。

んで、Ext JS始めようかな？と思われた方で、既にWEB技術を利用している方々は、再確認してください。
本当に上記について自信がありますか？何となくになっていませんか？
千里の道も一歩から・・なんていいますが、まずざっと復習するだけで、その後の開発スピードやロジック構築が大幅に変わります。

アプリケーションのためのHTML

HTMLとDOCTYPE

一見、普通のHTMLです。その通りで、普通のHTMLです。しかし、最近はやりのXHTMLコーディングを行ったりする方も多いのではないでしょうか。

その場合、doctypeの指定をどうするか？などで悩まれるかもしれません。ここで重要なのは、doctypeの指定は、アプリケーションに対してではなく、 ドキュメントに対して指定するものであるという点です。

つまり、Ext JSを使ったアプリケーションを開発するわけであって、文章を作成する訳ではありません。（Ext Coreなどで文章に対するエフェクトを与える場合などは、例外です）従って、doctypeの指定はしなくてもよいのです。 Extアプリケーションにおいてdoctypeを指定をすることで、 ブラウザによって動作がおかしくなることがある場合、doctypeの指定をやめるべきです。

外部読み込み

JavaScriptとCSSファイルを外部ファイルにして読み込む場面は多々あります。

ここで、重要なのは、CSSファイルはドキュメントのヘッドに含まれるべきで、JavaScriptファイルは、HTMLドキュメントの中のどこにでもを含むことができるという点です。通常、JavaScriptファイルの読み込みは、ヘッドに含まれる場合が多いですが、ユーザーに対する表示を先に行い下部でJavaScriptを読み込む場合もあります。

ファイルパス

読み込まれるファイルは、現在のフォルダーからの相対、または絶対位置で指定する必要があります。

次の場合、’mystyles.css’ファイルは現在のドキュメントより一つ上ののフォルダに存在します。

先頭にスラッシュを追加すると、ドキュメントルートからの絶対パスになります。

DOM(Document Object Model)

DOMとは、プログラミングでHTMLを表現することができるブラウザAPIです。DOMは、複数のオブジェクトツリーにより分けられ、ルート要素はwindowです。これは省略が可能です。

‘Window’はDOMのルートの要素(また、これはJavaScriptでグローバルな範囲と呼ばれる)です。documentは、1ページ全体を含むオブジェクトです。テーブルや、フォームなどいろいろなオブジェクトがこのオブジェクト内に存在することになります。

Windowの‘document’プロパティは、まるまる1ページ構造へのプロパティを含んでいます。

Ext JSを通して、またはピュアJavaScriptで、このDOMを操作することでインタラクティブ性の高いアプリケーションを作成していきます。正確には違いますが、しばしば、DOM=タグという認識で説明される場合があります。