第四回 ExtJS勉強会資料：ExtJS Ext.Action

プロジェクタ用URL

http://code.xenophy.com/

この記事は、2008年09月24日に行われる第四回ExtJS勉強会の資料です。

複数のコンポーネント間の機能共有について（Ext.Action）

ボタンなどのコンポーネントに機能を実装する場合、そのコンフィグオプションや、クラスメソッド、イベントハンドラに対して直接コードを記述し、時にはイベントディスパッチなどで動作させたりする場合があります。

しかし、共通の機能や、機能を再利用できる仕組みとして、ExtJSでは、Ext.Actionクラスがあります。

Actionで、Actionインタフェースを備える各コンポーネント（主にExt.Toolbar、Ext.Button、Ext.menu.Menu）のUIやイベントハンドラ、コンフィグオプションを共有することが可能です。

Ext.Actionクラスを使用できるコンポーネントを作成する場合、必ず次のメソッドを実装する必要があります。

• setText(string)
• setIconCls(string)
• setDisabled(boolean)
• setVisible(boolean)
• setHandler(function)

JavaScriptにはInterfaceが存在しないため、制限することはできませんが、仕様上Interfaceを適用した形になります。

ExtJSのサンプルやAPIリファレンスをみている限り、このExt.Actionは、説明にもあるとおりボタン系、メニュー系で利用することを前提としているようです。

ここでは、サンプルやAPIに記述されているコードをもとに説明します。

Ext.onReady(function(){

// Ext.Action生成
var action = new Ext.Action({

// テキスト設定
text: ‘アクション’,

// イベントハンドラ
handler: function(){
Ext.Msg.alert(‘クリック’,‘あなたは”アクション”をクリックしました。’);
},

// アイコン設定
iconCls: ‘icon1’
});

// パネル生成
var panel = new Ext.Panel({

// タイトル設定
title: ‘Actions’,

// 幅設定
width:600,

// 高さ設定
height:300,

// bodyスタイル設定
bodyStyle: ‘padding:10px;’,

// TopToolbar設定
tbar: [
action, // <- (アクション設定)
{
text: ‘アクションメニュー’,
menu: [
action // <- (アクション設定)
]
}
],

// アイテム設定
items: [

// (アクションを設定したボタン生成)
new Ext.Button(
action
)
],

// レンダリング先設定
renderTo: Ext.get( ‘panelActions’ )
});

// Ext.Actionメソッド使用ボタン生成
panel.getTopToolbar().add(
‘->’,

// setDisdabled動作ボタン
{
// テキスト設定
text: ‘無効化’,

// イベントハンドラ
handler: function(){

action.setDisabled( !action.isDisabled() );
this.setText( action.isDisabled() ? ‘有効化’ : ‘無効化’ );
}
},

// setText動作ボタン
{
// テキスト設定
text: ‘テキスト変更’,

// イベントハンドラ
handler: function(){
Ext.Msg.prompt(
‘テキスト入力’,
‘アクションに設定するテキストを入力してください。’,
function( btn, text ) {
if( btn == ‘ok’ && text ){
action.setText( text );
action.setHandler(
function(){
Ext.Msg.alert(
‘クリック’,
‘あなたは、”‘ + text + ‘”をクリックしました。’
);
}
);
}
}
);
}
},

// setIconClass動作ボタン
{
// テキスト設定
text: ‘アイコン変更’,

// イベントハンドラ
handler: function(){
action.setIconClass(
action.getIconClass() == ‘icon1’ ? ‘icon2’ : ‘icon1’
);
}
}
);
});

Ext.Actionクラスを生成して、ボタンのイベントハンドラ、テキスト、アイコンを設定します。

このインスタンスを合計３カ所に配置して共有するサンプルになっています。

メニューとボタンで同じ処理をする場合、テキストやアイコン、無効化、そしてイベントハンドラを共有することができます。処理内容を共有するだけであれば、イベントディスパッチするなり、関数を呼び出すなりで対応できそうですが、メニューそのものを抽象的に定義して共有することができるのが特徴です。

意外と、メニューとかボタンの処理は散乱しやすいので、こういった形で整理してくプログラミングを行っていくことで、ただでさえぐちゃぐちゃになりがちなJavaScriptが少しは整理できるのではないでしょうか。

今回使用したサンプルソースコード

20080924.zip

コラム：必殺height:21px（メニューアイコンのずれ修正）

メニューなどで、iconClsを指定したときに、下記のようになったことありませんか？

これは、日本語フォントが半角英数の高さよりも高いために発生してしまうようです。抜本的な解決になるかどうかは、まだ検証中ですが、アイコンクラスの高さを21pxにすると消えます(笑）

.icon1 {

background-image: url(comment.png) !important;
}

.x-btn .icon1 {
height: 21px;
}

本当は、ボタンのCSSをちゃんと調整してあげるのが正しいのでしょうけども、ExtJSで生成されたコードを見える限り、９個のTDで形成されているわけではなく、３個のTDで形成されているので、高さ対応はちょっとめんどいかなぁ・・と。

９個のTDだったら・・・

+－－+－－+－－+

|    |    |    |

+－－+－－+－－+

|    |    |    |

+－－+－－+－－+

|    |    |    |

+－－+－－+－－+

角丸だけ切り出して縦にのばしてあげられるのですが・・・実際は

+－－+－－+－－+

|    |    |    |

+－－+－－+－－+

という感じで、横に伸びることだけが考慮されている・・。

そのうち、対応パッチでも作れればいいんですがね。

取り急ぎ、現状は必殺21pxでかわしています。アイコンの表示位置が気にくわなければ、画像自体を調整するとか（ぉ