Sencha Advent Calendar 2015 - 12月20日 Ext.Editorで編集可能な簡易帳票を最速で作る

超遅くなりました。ごめんなさい。
今回のお題は、あんまり表に出てこない Ext.Editor たんです。

ExtJS6とか関係ないです。

リファレンスはこちら

http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.Editor

なにやってくれるやつかというと、よくExtJSのサンプルとかをダブルクリックしたりして、入力部品に切り替わって編集出来たりしますが、そんな感じのことをやってくれる偉い子です。

何をしてくれるのかすごくザックリと説明すると、Ext.Editorをあらかじめ用意しておいて、何かしらのアクションが発生した際にそのアクションが発生した要素をEditorに渡すと、その部分を指定した入力部品に置き換えてくれます。

実際に動作するのが下記帳票（と言うなのただのテーブル）の各セルをダブルクリックしてみませう。

編集できましたかね？

ちなみにEnterで確定したりして、初期状態から内容が変更になった場合は赤くなるようにしています。

こんなことが出来るのが Ext.Editor です :)

で、実際のコードを見ていくと。
まずは、帳票部分のHTMLは

HTMLコード

<table id="example-table">
    <thead>
        <tr>
            <th>項目1</th>
            <th>項目2</th>
            <th>項目3</th>
            <th>項目4</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>データ1-1</td>
            <td>データ1-2</td>
            <td>データ1-3</td>
            <td>データ1-4</td>
        </tr>
        <tr>
            <td>データ2-1</td>
            <td>データ2-2</td>
            <td>データ2-3</td>
            <td>データ2-4</td>
        </tr>
        <tr>
            <td>データ3-1</td>
            <td>データ3-2</td>
            <td>データ3-3</td>
            <td>データ3-4</td>
        </tr>
    </tbody>
</table>

こんな感じで、何も特殊なことをしていないただのHTMLです。
続いてCSS

CSSコード

<style type="text/css">
#example-table {
    width: 100%;
    color: #333;
    font-size: .95em;
    border-spacing: 1px;
}
#example-table th {
    font-size: 1.0em;
    background-color: #eee;
    padding: 5px;
}
#example-table td {
    font-size: 1.0em;
    padding: 8px;
    border-bottom: 1px solid #f1f1f1;
}
#example-table td:hover {
    background-color: #f5f5f5;
    cursor: pointer;
    color: #3169CB;
}
#example-table td.dirty {
    color: #CC1A1A;
    font-weight: bold;
}
</style>

こちら特殊なことは一切なにもしていないCSSになります。

最後にリソースとして読み込んでいるCSSとJSファイル、編集時の処理を実装してるコードが下記になります。

追加読み込みリソース（CDN）

<script src="//cdn.sencha.com/ext/gpl/5.0.1/build/ext-all.js"></script>
<link rel="stylesheet" href="//cdn.sencha.com/ext/gpl/5.0.1/packages/ext-theme-crisp/build/resources/ext-theme-crisp-all.css">

JSコード（とその解説）

<script type="text/javascript">
// $(function() {})みたいなもの
Ext.onReady(function() {
    var editor, table;

    editor = Ext.create('Ext.Editor', {
        // 入力部品確定後元の要素を更新するか
        updateEl: true,
        // 編集部品を表示した際にそろえる位置指定（API参照）
        alignment: 'l-l',
        // 入力部品の外枠に影を表示するか
        shadow: false,
        // 入力部品の自動サイズ設定
        autoSize: {
            width: 'boundEl'
        },
        // 編集部品指定（今回はテキストフィールド）
        field: {
            xtype: 'textfield'
        },
        // Ext.Editorに対するイベントバインド
        listeners: {
            // 編集確定時処理
            complete: function(e, nv, ov) {
                // 入力前と後で値が違う場合は、対象要素にCSSクラス付与
                // これで赤文字に変更している
                if (nv !== ov) {
                    e.boundEl.addCls('dirty');
                }
            }
        }
    });

    // 帳票テーブル要素取得（引数ID名）
    table = Ext.get('example-table');

    // ダブルクリック時のイベントバインド
    table.on({
        dblclick: {
            // ダブルクリック時実行処理
            fn: function(e, t) {
                // Ext.Editorに対して操作された対象要素を引き渡しEditor起動
                editor.startEdit(t);
            },
            // イベント対象要素
            element : 'el',
            // イベントを反応させる要素のセレクタ（CSSクラス可）
            delegate: 'td'
        }
    })
});
</script>

コメント入ってますが、こんだけのコードで終わりです。
編集契機を変更したい場合は、dblclick を click とかに変更すれば良いです。

Ext.onReady とか久しぶりに使った
あと実際にやるときは、各関数はちゃんと定義しましょう

HTMLとCSSコードは完全に独立した状態で作れるので、名前とかだけが人によって違う帳票的なものを印刷する手前で、編集出来るようなやつを用意する際にかなりさっくり作れるかと思います。

あとは今回テキストフィールドでやってますけど、同じ感じでコンボボックスとか日付ピッカーだったりも field の xtype 変えてあげれば、同じ用に使えるので結構良いような気がします。

ということで、少し変わったExtJSの使い方のご紹介でした、まる