ExtJS3.1がリリースされてました

IE6のメモリリークに関する対応がなされた模様。
その他、新しいUIも追加されているようです。

ＥｘｔＪＳの書籍発売

日本語としては、初の書籍「ExtJS入門」が発売されました。



ExtJS2.xベースのようで、さすがにExtJS3.0についての内容は無いです。

ExtJS3.0リリース

ExtJS3.0がリリースされました。


いろいろと試していこうと思っています。

NetBeans6.7でJavascriptのライブラリの追加ができないわけではなかったんだ

NetBeans6.5の時のように、Javascriptのライブラリを追加すべく[ツール]=>[ライブラリ]で設定が画面を表示したが、NetBeans6.5ではYahooUIやjQuery等がJavascriptのライブラリとして初めから追加されていたのなにも出てこない上に、「新規ライブラリ」がdisable状態になっていて追加ができない。


6.5ではあったのに、6.7では機能が無い？

と思ったら、単純にプロジェクト内にExtJSライブラリのソース一式を展開しておけば補完できるようになっていました。

Netbeans6.5でExtJS2.2のクラスやメソッドを補完できるようにする

Netbeans6.5でExtJS2.2でクラスやメソッドが補完できるらしいので、やり方のメモ。

事前準備）
ExtJSのサイトからExt2.2.1のライブラリファイルをダウンロードしておく。
※zipファイルのまま使うので、とりあえず解凍せずにどこかにおいておく。

NetBeans6.5での操作)

1)Javascriptライブラリの登録

メニューから[ツール]=>[ライブラリ]と選択して、ライブラリマネージャーを起動する。




2)ExtJSのZIPファイルを指定

ダイアログに左下に配置されている「新規ライブラリ」のボタンをクリックする。




ライブラリ名に名前を入力して「了解」ボタンをクリック。※名前は何でもいいのでここではExt2.2としておく

Javascriptのライブラリに先ほど登録したものが表示されればＯＫ．


3)ZIPファイルを登録

2)で登録したExtJS2.2を選択し、右に表示されている「Zipを追加」ボタンをクリックするとファイルを選択するためのダイアログが表示されるので、事前準備しておいたExtJS2.2のZIPファイルを選択する。
ライブラリのスクリプトパスの一覧に選択したファイルが表示されていればＯＫ


4)プロジェクトでの設定

ExtJSを利用するプロジェクトを選択後に右クリックでメニューを表示する。一番下にプロパティが存在するので選択する。
選択するとプロジェクトプロパティを選択するウィンドウが表示される。
右側に表示されているカテゴリの中から「Javascriptライブラリ」を選択する。
Javascriptライブラリの一覧には何も表示されていないので、左に表示されている「追加」ボタンをクリックし、先ほど登録したExtJSをチェックして「了解」をクリックする。
Javascriptライブラリを抽出して追加してくれるので、しばらく待つ。
ライブラリの一覧にExtJS2.2が表示されたらＯＫ





これでNetBeans側の設定は終了


エディタでの使い方)

ドットの入力やCtl+Spaceでコードアシストを表示する。





コーディングエラーも教えてくれる。

個人的にはハッシュなどで最後の項目の後にカンマがある場合に丁寧にワーニングを表示してくれるのでうれしい。




※NetBeans6.7ではJavascriptライブラリが使えないよう。

ExtJS3.0は2009年4月に出るようです。

Ext Conference2009でExtJS３．０やExt Core1.0の紹介があるらしい。

SpketIDE1.6.11がでてます

Ext Theme Builderという機能が用意されていて、サンプル画像を見た感じで、resourceディレクトリ配下にあるCSSファイルを編集するようです。
ただしこの機能はEclipse3.3以上が必要なようで、試せてません。

ExtJS2.1がでてます

ExtJS2.1が出ています。
SliderやStatusBarコンポーネントが追加されているみたいです。
サンプルが追加されているのがうれしいですね。

Ext.Elementのイベントに対する処理の登録方法

Ext.Elementもしくは、Ext.EventManagerに用意されているaddListener() かon()を利用して、Elementに対応するイベントを登録します。（on()はaddListener()の別名になりどちらも同じ処理になります）
※イベントタイプはDom Level2で規定されているイベントタイプと同じようです。

Ext.EventManagerは引数にイベントを登録する要素のID（もしくは要素そのもの（HTMLElement)）を指定する以外はExt.Elementで指定するのと同じなのですが、ExtJS2.0のAPIドキュメントでは推奨しないと書かれていたので、ここではExt.ElementのaddListener()を使ったイベント処理の登録方法をメモしておきます。


addListener( String eventName, Function fn, [Object scope], [Object options] ) : void

• String eventName : 登録対象のイベント名
• Function fn : イベントに対する処理を行う関数オブジェクト
• [Object Scope] : 関数実行時のスコープ
• [Object options]: イベントに対するオプション

記述例）clickイベントに対して、処理を登録

Ext.onReady(function(){
var myDiv=Ext.get('mydiv');
myDiv.addListner('click',function(){alert("Click!!"),this,{delay: 100});
myDiv.addListner('dblclick',function(){alert("Double Click!!"),this,{delay: 100}});
myDiv.addListner('mouseover',function(){alert("MouseOver!!"),this,{delay: 100}});
});

複数のイベントを一度に登録したい場合は、引数にオブジェクトを指定することでできます。
先ほどの例を書き換えると

Ext.onReady(function(){
var myDiv=Ext.get('mydiv');
myDiv.addListner({
'click':{
fn:function(){alert("Click!!"),this}),
scope:this,
delay: 100
},
'dblclick':{
fn:function(){alert("Double Click!!"),this}),
scope:this,
delay: 100
},
'mouseover':{
fn:function(){alert("MouseOver!!"),this}),
scope:this,
delay: 100
}
}
});

こんな書き方もできます。

Ext.onReady(function(){
var myDiv=Ext.get('mydiv');
myDiv.addListner({
'click':function(){alert("Click!!"),this}),
'dblclick':function(){alert("Double Click!!"),this}),
'mouseover':function(){alert("MouseOver!!"),this}),
scope:this,
delay: 100
}
});

イベントに対するオプションなどを個別に設定する必要がない場合は、これが短くていいかも。

複数の要素に対して同じイベント処理の登録を行う場合は、Ext.select()で設定した要素のCSSセレクタを指定してExt.CompositeElementを取得し、取得したExt.CompositeElementに含まれるElementに対してまとめてaddListener()でイベントをすることができます。

Ext.onReady(function(){
var myDivs=Ext.select('#foo a');
myDivs.addListner({
'click':function(){alert("Click!!"),this}),
'dblclick':function(){alert("Double Click!!"),this}),
'mouseover':function(){alert("MouseOver!!"),this}),
scope:this,
delay: 100
}
});

このほかに、Ext.addBehaviors()を利用しても同様にCSSセレクタを指定して複数の要素のまとめてイベントを登録することができます。
Ext.addBehaviors()はDomが構成された後に実行されるため、Ext.onReady()の中で記述しなくてもイベントの登録が行えます。

Ext.addBehaviors( Object obj ) : void

引数のオブジェクトは、{'CSSセレクタ@イベント名:functionオブジェクト}というように指定します。
イベントが複数ある場合は、プロパティを増やしていけばいいです。

また、'CSSセレクタ1,CSSセレクタ2・・,CSSセレクタN@イベント名'というようにCSSセレクタをカンマで区切ると複数のCSSセレクタの指定に対して同じ関数をイベント処理として登録することができます。

Ext.addBehaviors({
'#foo a@click' : function(e, t){alert("Click!!")},
'#foo a@dblclick' : function(e,t){alert("Double Click!!")},
'#foo a@mouseover' : function(e,t){alert("MouseOver!!")}
});

});

単に、イベントを登録したいだけなら、Ext.addBehavious()を使うと簡単に書けていいかもしれません。

ExtJSが適用するUIコンポーネントに対してイベント処理を登録する場合は、ここのコンポーネントに対してaddListener()やon()が用意されているので同じように設定することになります。
コンポーネントに対するイベントのイベント名は、APIドキュメントに書かれているのでそちらを参考にしてください。

Domが構成された後に処理を実行する方法

HTMLドキュメントが読み込まれDocumentの準備が終了したとき（画像を読み込む前）に処理を実行する場合は、Ext.OnReady()で実行する処理を関数オブジェクトで指定します。

Ext.onReady( Function fn, Object scope, boolean override ) : void

ネームスペースを設定する方法

Ext.namespace()を利用すると、手軽にネームスペースの設定ができます。

Ext.namespace(String namespace1,String namespace2,String etc ) : void

引数に複数のネームスペースを設定できるし、ひとつの指定で複数階層も設定できます。

環境を確認する方法

ExtJSでは、ブラウザやOS等の環境の確認をできるプロパティをExtクラスで提供している。

（ブラウザの判別）
　Ext.isIE : Boolean - InternetExploreの場合にtrue
　Ext.isIE6 : Boolean - InternetExplore6の場合にtrue
　Ext.isIE7 : Boolean - InternetExplore7の場合にtrue
　Ext.isGecko : Boolean - Gecko系ブラウザの場合にtrue
　Ext.isSafari : Boolean - Safariの場合にtrue
　Ext.isOpera : Boolean - Operaの場合にtrue

（実行環境の判別）
　Ext.isWindows : Boolean - Windowsの場合にtrue
　Ext.isLinux : Boolean - Linuxの場合にtrue
　Ext.isMac : Boolean - Macの場合にtrue
　Ext.isAir : Boolean - Airで実行されている場合にtrue

（そのほか）
　Ext.isSecure : Boolean - SSLのページである場合にtrue

ExtJSで必ずしたほうがいい設定

ExtJSではブランク用イメージとしてs.gifというファイルを使用しているのですが、デフォルトではExtJSのHPのURLが指定されているので、Ext.BLANK_IMAGE_URL の値を変更する。

Ext.BLANK_IMAGE_URL = 'ext2.0.1/resources/images/default/s.gif'

要素やコンポーネントの情報の取得方法

ExtJSでは、ドキュメントに配置されされている要素を取得するためにいくつかの手段を用意してくれています。

（１）IDやnodeを指定してExt.Elementを取得する

Ext.get( Mixed el ) : Element

Element要素をひとつだけ取得するときに利用します。
このほか、Documentやbodyを直接取得できるメソッドが用意されています。
　HTMLのBody要素を取得する=> Ext.getBody() : Ext.Element
　HTMLのドキュメント要素を取得する=> Ext.getDoc() : Ext.Element

（２）CSSセレクタを指定して、Ext.CompositeElementで取得する

Ext.select( String/Array selector, [Boolean unique], [HTMLElement/String root] ) : CompositeElementLite/CompositeElement

※Ext.CompositeElementは簡単に言うと、複数のExt.Elementをまとめて扱うことのできるクラス。

CSSセレクタに一致するすべて要素を取得できるので、複数の要素にまとめてイベントやStyleを設定するときに利用します。


（３）XPATHを指定して、Ext.Elementの配列を取得する

Ext.query( String path, [Node root] ) : Array

Ext.select()だとCompositeElementが取得でき、要素に対してまとめて設定しやすいので、あまり利用シーンはないかも。
CSSセレクタよりもXPathの方が複雑な指定が可能なので、複雑な指定をする場合に利用する。

（４）IDやnodeを指定してDomを取得する

Ext.getDom( Mixed el ) : HTMLElement

プレーンなDOMを扱い場合に利用する。

（５）IDを指定してExt.Componetを取得する

Ext.getCmp( String id ) : Ext.Component

Ext.PanelやExt.formオブジェクトなど、Ext.Componetを継承したオブジェクトを取得するときに利用します。
オブジェクトの生成時にidオプションを指定すれば任意のIDを割り当てることができます。
また、idオプションを指定しない場合はExtJSが自動で重複しないIDを割り当ててくれます。
自動的に割り当てられたIDはExt.ComponetのgetId()メソッドで取得することができます。



ExtJSのテーマの変更方法

ExtJSはテーマを切り替えることにより、見栄えを変更することができます。

ExtJS2.0では標準以外にxtheme-gray.cssというCSSが用意されているので追加で読み込むことでgrayテーマが適用されます。
【grayテーマを適用する場合のサンプル】

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="ext-2.0.1/resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" media="screen" href="ext-2.0.1/resources/css/xtheme-gray.css">
<script type="text/javascript" src="ext-2.0.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0.1/ext-all.js"></script>
</head>
<body>
</body>
</html>

ExtJSのメッセージを日本語化する方法

ExtJSは日本語のリソースファイルが用意されているので、コンポーネント等が表示するメッセージを日本語にしたい場合は、source/locale/ext-lang-ja.jsを追加で読み込めばいいです。
【日本語リソースを適用する場合のサンプル】

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="ext-2.0.1/resources/css/ext-all.css">
<script type="text/javascript" src="ext-2.0.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0.1/ext-all.js"></script>
<script type="text/javascript" src="ext-2.0.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0.1/source/locale/ext-lang-ja.js"></script>
</head>
<body>
</body>
</html>

ext-lang-ja.jsでは、通常のメッセージの日本語に置き換えているだけなので、日本語化されていない箇所があれば、自分で同じように定義してしまえばいいです。

ExtJSで必要なファイル

ExtJSを使う場合には、JavaScripファイルのext-base.js、ext-all.jsと、リソースファイルとして、ext-all.cssファイルを読み込む必要があります。

※ExtJSはPrototype.jsやjQuery,YahooUIなどのライブラリを利用できるようになっており、それらのライブラリを利用する場合は、ext-base.jsファイルの代わりにそれぞれのライブラリのアダプターとなるをファイルを指定する必要があります。

ExtJSライブラリがext-2.0.1ディレクトリに配置されていることとすると以下のように記述することができます。
【サンプル】

<html>
<head>
<link rel="stylesheet" type="text/css" media="screen" href="ext-2.0.1/resources/css/ext-all.css">
<script type="text/javascript" src="ext-2.0.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0.1/ext-all.js"></script>
</head>
<body>
</body>
</html>

上のサンプルはExtJSの用意するすべての機能を利用することを想定してext-all.jsを読み込んでいますが、http://extjs.com/download/buildで、必要な機能だけのJavaScriptファイルを作ることができるので、余分な機能を取り入れずライブラリのサイズを少なくすることができます。

ExtJS2.0対応のIDE Spketプラグインの設定

以下の順で設定してみました。
事前にExtJSライブラリがどこかに展開しました。

[Spketプラグインの設定]

1. SpketのページからEclipse用のプラグインをダウンロードする。（今回ダウンロードしたのは1.6.7）
2. ダウンロードしたファイルを展開して、pluginフォルダと、featuresフォルダをEclipseをインストールしたフォルダ配下にコピーして、Eclipseを起動する。
3. Eclipseを起動して、ウィンドウ=>設定をクリックして設定パネルを起動。
4. SpketのJavascriptProfileという項目を選択する。
5. [New]ボタンをクリックしてExtJS2用のプロファイルを作成する。
6. 名前は適当で一応extjs2としました。
7. [Add Library]ボタンをクリックするとExtJSが選択できるので、ExtJSを選択した状態でOKボタンをクリックする。
8. [Add File]ボタンが使えるようになるのでクリックし、ExtJSのsorce/ext.jsbと言うファイルを選択する。
9. プラグインを設定を終了する。

※インストールすれば使えると思ってたけど、うまくいかずかなり悩みました。7番目以降をしないとコードアシストしてくれません。
※ext.jsbはJSBuilderというJavascriptの圧縮ツールのプロジェクトファイルのようです。JS　Builderについては後日調査予定

ExtJS2.0対応のIDE

ExtJS2.0対応のIDEの紹介がExtJSのブログで紹介されていました。

http://extjs.com/blog/2008/02/01/ides-plugins-and-tools-for-ext-js-20/

AptanaStudio、Eclipse、Dreamweaverで利用できるプラグインがあるみたい。
関数やプロパティのコードアシストできるだけでもずいぶんと楽です。

普段Eclipseを使うことが多いので、Spketを使ってみようと思う。

なんとなくはじめてみました

最近調べ使い始めたJavaScriptやExtJSについてのメモを書いていく予定です。