reverse_iterator

reverse_iteratorのメモ。

reverse_iteratorは通常のiterator（反復子）と逆向きに要素を横断するための逆転反復子。
図示すると以下の通り。

向きが逆なだけでなく、順方向と一部用法が違ったので注意。
eraseするとき、順方向なら

// std::set a_set;
std::set::iterator ite = a_set.begin();
a_set.erase(ite++);

こういう感じだが、reverseだと

std::set::reverse_iterator rev_ite = a_set.rbegin();
a_set.erase(--rev_ite.base());

になる。

プログラミングに適したフォント

TOP 10 PROGRAMMING FONTS
という記事を読んで開発環境のフォントを変えてみる気になりました。

曰く、
1位 INCONSOLATA

2位 CONSOLAS

どちらもフリーのフォントで、CONSOLASの方はWindows VIsta以降は標準で入っているらしいです。
サイトを見る限りではINCONSOLATAの方がすっきりして見えるのですが、
私のXPにはCONSOLASが入っていたので（Visual studioに入っていたのか？）CONSOLASにしてみました。

今までCOURIERを使うことが多かったんですが、こっちのが良いです！！
気分も変わりますし。
ちなみに上の記事ではCOURIERは10位だったんですが、おすすめしないって書いてありました...。

Strawberry Perl に入ってたg++

Windows上でちょっとC++のソース書きたいなーと思ったんですが
そのために仮想環境でlinux入れるのもcygwinとか入れるのもめんどくさい....。

この間WindowsでPerl動かしてみるために入れたStrawberry Perlにgcc/g++入ってるって何かに書いてなかったか？と思ってコマンドプロンプトで試しに
g++ -v
打ってみたらちゃんと返ってきました。

これでわざわざ他のもの入れる必要ないですね！！ラッキーです。
hello world も大丈夫。

Strawberry Perlに同梱されているのはMinGWというGNUのCコンパイラのWindows移植版ということでした。

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

コンポーネントの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)
    }
});

というように書けます。

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のところに例がありましたね。

カラーパレットウィンドウ (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に選択した色のコードを表示しています。