notes

2011年4月13日水曜日

Panelなどのtitleをhtmlで設定する (ExtJS)

Panelとその拡張のコンポーネントはheader、headerCfgオプションを使用してタイトルを設定できます。titleオプションでタイトルを設定する場合はテキストしか使えませんが、headerをtrueにしてheaderCfgを有効にすれば、DOM要素でタイトルを設定することができます。このときtitleオプションは指定しないようにします。
headerCfgの書式はExt.DomHelperと同じです。

もともとfieldsetのtitleにcollapse/expandの動きと関係ないチェックボックスを付ける方法を探していたんで、その例をおいておきます。

上段のfieldsetはタイトルをheaderCfgオプションで設定したもの、下段はタイトルをtitleオプションで設定し、checkboxToggleをtrueに設定したものです。チェックボックスを外したときの動きが違います（checkboxToggleはfieldsetのcollapse / expandのためのオプションなので）。

checked

unchecked

javascriptソースは以下の通りです。

javascript:

Ext.onReady(function(){
    var panal = new Ext.Panel({
        title: 'Sample panel',
        height: 250,
        width: 300,
        bodyStyle: 'padding: 15px',
        renderTo: 'panel',
        layout: 'form',
        items: [{
            xtype: 'fieldset',
            header: true,
            headerCfg: {
                tag: 'legend',
                cls: 'x-fieldset-header x-unselectable',
                cn: [{
                    tag: 'input',
                    type: 'checkbox'
                }, {
                    tag: 'span',
                    cls: 'x-fieldset-header-text',
                    html: 'header config'
                }]
            },
            defaultType: 'textfield',
            items :[{
                fieldLabel: 'Field 1'
            }, {
                fieldLabel: 'Field 2'
            }]
        }, {
            xtype: 'fieldset',
            checkboxToggle: true,
            collapsed: true,
            title: 'Title',
            defaultType: 'textfield',
            items :[{
                fieldLabel: 'Field 3'
            }, {
                fieldLabel: 'Field 4'
            }]
        }]
    });
});

headerCfgでは次の4つの以外は、DOM要素の属性と判断されます。

tag: 要素のタグ名
children or cn: 子要素の配列
cls: 要素のclass属性
html: innerHTML

2011年3月10日木曜日

コンポーネントのlistenersオプションで、同一イベントに対して複数のハンドラを設定したいとき (ExtJS)

createSequenceを使ってできました。関数を呼び出した後に別の関数を呼び出す関数です。

createSequence( Function fcn, [Object scope] ) : Function

javascript:

var secondFn = function(){
    // 何か処理
};

var cmb = Ext.form.ComboBox({
    typeAhead: true,
    triggerAction: 'all',
    lazyRender:true,
    mode: 'local',
    store: new Ext.data.ArrayStore({
        id: 0,
        fields: [
            'myId',
            'displayText'
        ],
        data: [[1, 'item1'], [2, 'item2']]
    }),
    valueField: 'myId',
    displayField: 'displayText',
    listeners: {
        select: function(cmb, record, index){
            // 何か処理
        }.createSequence(secondFn)
    }
});

というように書けます。

2011年3月6日日曜日

layoutの中のitem間にスペースを作る(ExtJS - Ext.spacer)

地味に便利だと思いました。
例えばanchor layoutで縦に要素をただならべると、こんな感じに要素同士は隣あっています。

ちょっと間空けたい時とかスタイルの設定すんのかなー、でもそれめんどすぎと思ったらちゃんとありました。
Ext.Spacer。xtypeはspacerです。
これをitem1とitem2の間に追加するとこんな感じに間隔を空けられます。

javascriptのソース

Ext.onReady(function(){

    var panal = new Ext.Panel({
        title: 'anchor layout',
        autoHeight: true,
        width: 300,
        bodyStyle: 'padding: 15px',
        renderTo: 'panel',
        layout: 'anchor',
        items: [{
            title: 'item1',
            anchor: '90%',
            height: 100
        }, {
          xtype: 'spacer',
          height: 10
        }, {
            title: 'item2',
            height: 100
        }]
    });
});

なんということもないんですが、最初は存在に気づきませんでした。
スペースの大きさ設定、はheightやwidthの他に、layoutがboxのときはflexというのを使うことができます。
下はitem間にflex: 1のspacerを配置して均等に配置した例です。

このあたりはExtJS exampleのHBox Layout, VBox Layoutのところに例がありましたね。

2011年3月5日土曜日

カラーパレットウィンドウ (ExtJS)

ExtJSでカラーパッレトウィンドウです。
パレットで色を選択してOKボタンをクリックすると、もとの画面に反映します。
以下はサンプル画像です。

初期状態:

colorボタンをクリックしてカラーパレットウィンドウをポップアップ。
カラーボタンをクリックするとウィンドウ下部に選択した色のコードを表示します。

OKボタンクリックでもとの画面に選択した色を表示します。

HTML

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="./resources/css/ext-all.css" />

    <script type="text/javascript" src="./jslib/jquery-1.5.1.min.js"></script>
    <script type="text/javascript" src="./jslib/adapter/jquery/ext-jquery-adapter.js"></script>
    <script type="text/javascript" src="./jslib/ext-all.js"></script>
    <script type="text/javascript" src="./sample.js"></script>
  </head>
  <body>
    <div id="btn" style="margin: 10px"></div>
    <div  style="margin: 10px">selected color: <span id="selected">□</span></div>
  </body>
</html>

javascript

Ext.onReady(function(){
    var btn = new Ext.Button({
      text: 'color',
      renderTo: 'btn',
      listeners: {
        click: function(){
            var win = new Ext.Window({
              height: '180',
              width: '160',
              xtype: 'panel',
              title: 'color select',
              items: [{
                xtype: 'colorpalette',
                listeners: {
                  select: function(plt, color){
                      Ext.getCmp('sel-color').setValue(color);
                  }
                }
              }, {
                xtype: 'form',
                border: false,
                bodyStyle: 'background-color: transparent; padding-left: 5px;',
                labelWidth: 60,
                items: [{
                    xtype: 'displayfield',
                    id: 'sel-color',
                    style: 'margin-top: 2px',
                    fieldLabel: 'selected'
                }]
                
              }],
              buttons: [{
                text: 'OK',
                listeners: {
                  click: function(){
                      var clrtext = Ext.getCmp('sel-color').getValue();
                      var ele = Ext.get('selected');
                      if((clrtext == 'ffffff') || (clrtext == 'FFFFFF')){
                          ele.update('□');
                          ele.applyStyles('color: #000000');
                      }else{
                          ele.update('■');
                          ele.applyStyles('color: #'+ clrtext);
                      }
                      win.destroy();
                  }
                }
              }]
            });
            win.show();
        }
      }
    });
});

ポイントはpanelのitemsにcolorpaletteを指定するところです。
この例ではさらにdisplayfieldに選択した色のコードを表示しています。

2011年2月27日日曜日

ハンドラの関数に引数を追加したいとき (ExtJS)

コンポーネントにイベントハンドラを設定するとき、追加の引数を渡したいときがあります。
たとえばコンボボックスのselectイベントの場合

// 関数定義
function doSomething(combo, record, index){
    // 何か処理
}

// イベントハンドラ設定部分
Ext.getCmp('comboID').on('select', doSomething);

そのままだと、引数として以下が渡されます。

combo: Ext.form.ComboBox
コンボボックス
record: Ext.data.Record
ストアから返されたデータレコード
index: Number
ドロップダウンリスト内の選択された項目のインデックス

ハンドラに引数を追加したいとき、関数定義を次のようにしても、そりゃーダメです。

// 間違った関数定義
function doSomething(combo, record, index, addParam){
    // 何か処理
}

こういうときはFunctionクラスのcreateCallback、またはcreateDelegateを使います。

上の例だと次のように書けます。

/**
* createDelegateを使う
*/
// 関数定義部分
function doSomething(addParam){
    var value = this.getValue();
    // 何か処理
}

// ハンドラ設定部分
var cmb = Ext.getCmp('comboID');
cmb.on('select', doSomething.createDelegate(cmb, [addParam]));

createCallbackとcreateDelegateの違いは、スコープを渡せるかどうかです。

引数の形式
createCallback(/*args...*/):Function
createDelegate([Object obj], [Array args], [Boolean/Number appendArgs]):Function

ExtJSのAPIリファレンスにはbuttonの例が載っています。
ExtJS 3.0 API Documentation 日本語版
http://extdocs.xenophy.com/

2011年2月22日火曜日

LPIから『高信頼システム構築標準教科書』無料公開

http://lpi.or.jp/linuxtext/system.shtml

おおー！ありがたい。アンケートに答えるのめんどくさかったけど。

基準にしているOSはcentOS 5.5です。
目次は次の通り。

1章高信頼システムの概要
2章 Linuxサーバ１台の稼働率を上げる設計
3章複数台のサーバによる高信頼性システムの設計例
4章データの共有
5章データベースの冗長化
6章クラスタシステムの監視
7章システム監視
8章ロードシェアリングによるシステムの構築
9章アクティブ・スタンバイクラスタによるシステムの構築
10章サーバの仮想化
11章仮想サーバを構築する（Xen編）
12章仮想サーバを構築する（KVM編）

週末あたりにまとめて読めると、いいなあ...

2011年2月19日土曜日

Eclipseショートカット -インクリメンタルサーチができてうれしい-

とりあえずよく使うものをメモです。キーアシスト（Ctrl + Shift L）を見つつ。

行ジャンプ
Ctrl + L の後表示されるフォームに行番号を入力

選択文字列を検索 next find
Ctrl + K
逆方向
Ctrl + Shift + K

インクリメンタルサーチ
Ctrl + J
逆向き（reverse）は
Ctrl + Shift + J
次の候補へは↑↓キーで移動できます。サーチから抜けるときはescや←→で。

コード整形
Ctrl + I

1行コメントアウト / 1行コメントアウト解除
Ctrl + /

ブロックコメントアウト
Ctrl + Shift + /
解除
Ctrl + Shift + \

1行削除
Ctrl + D

矩形選択
Alt + Shift + A
これで矩形選択と通常の選択を切り替えられます。

getter/setter生成のウィンドウを開く
Alt + Shift + S の後 R

あとショートカットじゃないですが
"/**"と入力した後でエンターすると、デフォルトのdocが入力されるのは便利ですね。

登録: 投稿 (Atom)