如何在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/