2008年4月28日月曜日

SpketIDE1.6.11がでてます

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

ExtJS2.1がでてます

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

2008年2月26日火曜日

ExtJS2.0.2が出てます

ExtJS2.0.2が出てます。

Air対応ってことでExt.Airパッケージが追加されています。
Ext.isArrayメソッドが追加されたようで、多くのクラスでExt.isArrayを利用するように修正があったようです。

Ext.form.Labelが追加されたのと、Ext.form.BasicFormでAjaxでないHTMLフォーム送信が行えるようになったみたいです。

2008年2月24日日曜日

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ドキュメントに書かれているのでそちらを参考にしてください。

2008年2月23日土曜日

JS Builder

JavaScriptの結合、圧縮、コメント除去ができます。
結合するときに、ヘッダーコメントをつけることもできるのでいいですね。
ExtJSライブラリでも利用しているようです。
ダウンロードはこちらから。


難読化は行わないので、難読化が必要な場合は、別のツールを使うか、JS Builderで圧縮した後に難読化する必要があります。

ビルドするときにJS Docのドキュメントも同時に出力ができるようです。
設定項目を見るとjs docのPerlプログラムを実行するようなので、ActivePerlなどの環境を別途用意する必要でしょう。

【画面サンプル】

2008年2月21日木曜日

Spket IDE 1.6.8リリース

Spket IDE 1.6.8が出てます。こちらから

2008年2月17日日曜日

JSONデータへのデコード/JSONデータへのエンコード処理

(1)オブジェクトをJSONデータ(String)へ変換する場合
Ext.util.JSON.encode ( Mixed o ) : String
Ext.encode()を使っても同じことができます。

(2)JSONデータをオブジェクトへ変換する場合
Ext.util.JSON.decode ( String json ) : Object
Ext.decode()を使っても同じことができます。