dojo - dojo でカスタム テーブル ウィジェットを作成する方法は?

Question

最近、アプリケーション・インターフェースのプログラミングに Dojo を使い始めました。Dojo は初めてで、最初の課題は、データベースからのファイル・リストとファイル・アイコンを表示する行を持つカスタム・テーブル・ウィジェットを作成することです。ウィジェットはデータ グリッドに似ていますが、データ グリッドはネットワークに負荷をかける場合があるため、リストのようなテーブルを使用したいと考えています。どうぞよろしくお願いいたします。

Answer 1

わかりました、グリッドと同様に、カスタム ウィジェットをデータストアでインスタンス化するとしましょう。あなたのストアは、どのタイプ (例: itemfilereadstore) に応じて、そのアイテムのリストを持っており、ウィジェットに行を作成しながら、以下がそれらを処理します。

<script>
    dojo.declare("myTable", [dijit._Templated], {
     // define which template to instantiate on your domNode (in this case, table becomes the domNode of your widget)
     templateString: '<table><thead dojo-attach-point="headNode"></thead><tbody dojo-attach-point="bodyNode"></tbody></table>',

     constructor: function(args) {
       args = args || {};
       if(!args.store) console.warn("No store supplied");
       this.store = args.store
       // Note; there are a number of methods to achieve this hook,
       // depending on which type of datastore is in use
       this.store.fetch({ onComplete: dojo.hitch(this, "_onload") });
     },
     // function to be called whenever the store has fetched an item set
     _onload: function(items) {
       var _t = this, store = _t.store, head = _t.headNode, body = _t.bodyNode;
       var headIsFilled = false;
       // 'haxed' reset of current setup, simply resetting innerhtml
       _t.rowIdentifiers = [];
       _t.rows = [];
       head.innerHTML = "<tr></tr>";
       head = head.firstChild;
       body.innerHTML = "";
       dojo.forEach(items, function(item) {
           // generic way of simply showing all of contents available in store
           // prefereably, set this structure in an argument while constructing and
           // fill head with, say _t.layout
           if(!headIsFilled) {
              // loops the first item, making sure not to take in any internal references, should check for item
              for(var i in item) if(item.hasOwnProperty(i) && i != "_S" && i != "_RI") {
                 dojo.place("<th>"+i+"</th>");
                 _t.rowIdentifiers.push(i);
              }
              headIsFilled = true; // only once
           }
           var tr = dojo.create("tr", null, body);
           var row = { el : tr }
           var cell;
           dojo.forEach(_t.rowIdentifiers, function(key) {
             cell = dojo.create("td", {innerHTML : store.getValue(item, key)},  tr);
             row[key] = cell.innerHTML; // the toString value of item
           });
           _t.rows.push(row);
       });
     }
    });
</script>

コードは評価されていませんが、ウィジェットを起動する方法の一般的なアイデアを提供する必要があります。

コードのいくつかの点に注意してください。templateStringは基本的な html レイアウトのあるべき姿であり、多くの「魔法の」規則があります。この例では、アタッチポイントのみを使用して、_Templated mixin がウィジェット内でその domNodes への参照を作成するようにします。

スターター チュートリアルおよび一般的な参照として、以下を参照してください。

http://dojotoolkit.org/documentation/tutorials/1.6/understanding_widget/

http://dojotoolkit.org/documentation/tutorials/1.6/templated/