notes: 3月 2011

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に選択した色のコードを表示しています。