dojoでカスタム表ウィジェットを作成する方法は？

Question

最近、アプリケーション・インターフェースのプログラミングにDojoを使用し始めました。Dojoを初めて使用しました。最初の割り当てでは、データベースとファイル・アイコンからのファイル・リストを示す行を持つカスタム表ウィジェットを作成します。ウィジェットはデータグリッドに似ていますが、データグリッドがネットワークに重くなることがあるため、リストのような表を使用したいと考えています。本当に感謝していただきありがとうございます。

Answer 1

グリッドと同様に、カスタムウィジェットをデータストアでインスタンス化するとします。そのアイテムのリストを持っており、以下は

<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> 

コードが評価されていないが、一般的なアイデアを与える必要があり、あなたのウィジェットに行を作成しながら、それらを処理します：どのタイプ（itemfilereadstore例）に応じて、お店、ウィジェットを起動する方法。

コードにはいくつか注意してください。 templateStringは、この例では唯一のattachpointsが_Templatedのミックスインが

がスターターチュートリアルとしてとは、以下を参照してくださいそのdomNodesにウィジェット内の参照を作成してもらってくださいするために使用され、基本的なHTMLのレイアウトはどうあるべきかで、「魔法」の規則の数を持っています一般的な基準：

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

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