如何在dojo中創建自定義表部件？

Question

最近我一直在使用Dojo的編程應用接口開始，是新來的Dojo和我的第一項任務是創建一個具有行顯示數據庫和文件圖標文件列表中的自定義表部件。該小部件將類似於數據網格，但我們希望使用類似於列表的表格，因爲數據網格有時可能會對網絡造成很大影響。謝謝你的幫助將非常感激。

Answer 1

好吧，假設你實例化自定義窗口小部件與數據存儲，一樣的網格。您的商店，這取決於哪種類型（例如：itemfilereadstore）有一個郵件列表和下面將對其進行處理，同時創建行到你的widget

<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佈局應該是什麼，有一些「神奇」約定，在本例中僅attachpoints用於有_Templated混入使得其domNodes在窗口小部件引用

見下面爲首發教程和一般參考：

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

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