コツコツ拡張Cloud9。フォームの入力を受け取ってグリッドに表示する。

Cloud9 IDEを拡張して、テキストボックスなどのフォームから受け取った文字列をグリッドに表示してみます。

まずはビューにテキストボックス（a:textbox）とボタン（a:button）を追加します。

cloud9/client/ext/datagrid_test/datagrid_test.xml

<a:application xmlns:a="http://ajax.org/2005/aml">
    <a:window
      id        = "winDatagrid"
      title     = "放課後ティータイム"
      icon      = ""
      center    = "true"
      resizable = "true"
      buttons   = "close"
      modal     = "false"
      skin      = "bk-window"
      width     = "660"
      height    = "400"
      kbclose   = "true"
      draggable = "true">
        <a:vbox anchors="0 0 0 0" edge="0 0 0 0">
            <a:hbox>
                <a:textbox id="tbPackage" flex="1">
                
                </a:textbox>
                <a:button id="btnInstall" caption="インストール">
                
                </a:button>
            </a:hbox>
            <a:datagrid id="dgList" flex="1">
                <a:each match="[member]">
                    <a:column caption="メンバー名" value="[@name]" width="50%" />
                    <a:column caption="CV" value="[@cv]" width="50%" />
                </a:each>
            </a:datagrid>
        </a:vbox>
    </a:window>
</a:application>

次にロジックにイベントハンドラを追加してみます。

cloud9/client/ext/datagrid_test/datagrid_test.js

define(function(require, exports, module) {
    var ide = require('core/ide');
    var ext = require('core/ext');
    var markup = require('text!ext/datagrid_test/datagrid_test.xml');
    
module.exports = ext.register('ext/datagrid_test/datagrid_test', {
    name   : "Datagrid Test",
    dev    : "Tomoyuki Inoue",
    alone  : true,
    type   : ext.GENERAL,
    markup : markup,
        
    nodes  : [],
        
    hook : function(){
        var _self = this;

        this.nodes.push(
            mnuWindows.insertBefore(new apf.item({
                caption : "Datagrid Test",
                onclick : function(){
                    ext.initExtension(_self);
                    // モデルを作成
                    var model = new apf.model();
                    // datagridのmodel属性にmodelを設定
                    dgList.setModel("model", model);
                    // data要素を作成
                    var data = winDatagrid.ownerDocument.createElement("data");
                    // dataをロード
                    model.load(data);
                    // modelを設定
                    dgList.setModel(model);
                    // ボタンクリック時のイベントハンドラ
                    btnInstall.addEventListener("click", function(e){
                        if(tbPackage.value.length > 0){
                            // モデルを取得
                            var m = dgList.getModel();
                            // member要素を作成
                            var member = winDatagrid.ownerDocument.createElement('member');
                            // name属性を設定
                            member.setAttribute('name', tbPackage.value);
                            // cv属性を設定
                            member.setAttribute('cv', 'CV1');
                            // data要素の子要素としてmember要素を追加
                            m.data.appendChild(member);
                        }
                    });
                    
                    // datagridを表示
                    winDatagrid.show();
                }
            })
        ), mnuWindows.firstChild);
        

    },
        
    init : function(apfNode){},
        
    nable : function(){
        if (!this.disabled) return;
        
        this.nodes.each(function(item){
            item.enable();
        });
        this.disabled = false;
    },
    
    disable : function(){
        if (this.disabled) return;
        
        this.nodes.each(function(item){
            item.disable();
        });
        this.disabled = true;
    },
    
    destroy : function(){
        this.nodes.each(function(item){
            item.destroy(true, true);
        });
        this.nodes = [];
    }
});

});

モデルに追加すると、勝手にdatagridが更新されます。

実行結果はこんな感じ。テキストボックスに文字列入れてインストールボタンをクリックすると、データグリッドに追加されます。