コツコツ拡張。Cloud9 IDEのDataGridでモデルとビューを切り離す。

コツコツ拡張。昨日のエントリーで出来なかった、モデルとビューを分離してみます。

まずはViewから。

cloud9/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:datagrid 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/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();
                    model.load(
                          "<data>"
                        + "<member name=\"平沢 唯\" cv=\"豊崎 愛生\"></member>"
                        + "<member name=\"秋山 澪\" cv=\"日笠 陽子\"></member>"
                        + "<member name=\"田井中 律\" cv=\"佐藤 聡美\"></member>"
                        + "<member name=\"琴吹 紬\" cv=\"寿 美菜子\"></member>"
                        + "<member name=\"中野 梓\" cv=\"竹達 彩奈\"></member>"
                        + "</data>");
                    winDatagrid.setAttribute("model", model);
                    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 = [];
    }
});

});

次はコントローラとモデルを切り離してみます。