2013-08-02 107 views
0

我有一個dojo對話框功能,並希望能夠添加一個5行的表。我怎樣才能做到這一點?以下是我的代碼。將表添加到我的dojo代碼

dojo.require("dijit.Dialog"); 
    dojo.require("dijit.form.TextBox"); 
    dojo.require("dojox.grid.EnhancedGrid"); 
    dojo.addOnLoad(function() { 
    popup = new dijit.Dialog({ 
    title: "Non-Spatial Permanent Feature Deductions...", 
    style: "width: 750px; height: 400px", 
    content: "<input dojoType='dijit.form.Button' type='button' name='name' id='name' label='OK'>" 
}); 
    popup.show() 
}); 
+0

使用dojo.create:http://dojotoolkit.org/reference-guide/1.6/dojo/create.html – Philippe

回答

1

如果你的錶行是固定的即5比你可以做到這一點創建一個html文件,有5行的表,並調用內部對話框,文件一個簡單的事情。

popup = new dijit.Dialog({ 
    title: "Non-Spatial Permanent Feature Deductions...", 
    style: "width: 750px; height: 400px", 
    href:"table.html" 
}); 
1

當我需要一個有一堆的dijits或自定義的功能我最終作出一個自定義對話框的dijit的對話框。這是我目前的一個項目。

define([ 
    "dojo/_base/declare", 
    "dijit/_Widget", 
    "dijit/_TemplatedMixin", 
    "dijit/_WidgetsInTemplateMixin", 
    "dojo/i18n!magic/nls/common", 
    "dojo/text!./templates/emrSelection.html", 
    "dojo/dom-construct", 
    "dojo/on", 
    "dojo/Evented", 
    "dojo/_base/connect", 
    "dojo/query", 
    "dojo/_base/lang", 
    "dijit/Dialog", 
    "dijit/form/CheckBox" 
], 
function (declare, _Widget, _TemplatedMixin, _WidgetsInTemplateMixin, i18n, template, domConstruct, on, Evented, connect, query, lang, Dialog, CheckBox) { 

return declare("project.customDialog", [Dialog], { 

    title: i18n.customDialog.title, 
    emrIds: [], 

    constructor: function(/*Object*/ kwArgs) { 
     lang.mixin(this, kwArgs); 

     var contentWidget = new (declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], { 
      closeLabel: i18n.close, 
      templateString: template, 
      baseClass: "customDialog" 

     })); 
     contentWidget.startup(); 
     this.content = contentWidget; 
    }, 

    postCreate: function() { 
     this.inherited(arguments); 
    }, 

    startup: function() { 
     this.inherited(arguments); 
     this._createTable(); 
    }, 

    _createTable : function() { 
     var that = this; 
     var i = 0; 
     var tr = null; 
     this.store.query().forEach(lang.hitch(this, function(emr){ 
      var state = that.emrIds.indexOf(emr.id) != -1; 
      if(i++%3 == 0) { 
       tr = domConstruct.create("tr"); 
       domConstruct.place(tr, that.content.tableBody); 
      } 
      var td1c = domConstruct.create("td", {'class':"checkBox"}, tr); 
      var td1l = domConstruct.create("td", {'class':"label"}, tr); 
      var box = that._createCheckBox(emr.name, state, emr.id); 
      domConstruct.place(box.domNode, td1c); 
      domConstruct.place("<label for='checkbox'>"+emr.name+"</label>", td1l); 
     })); 
    }, 

    _createCheckBox : function(name, checked, id) { 
     var box = CheckBox({ 
      name: name, 
      value: name, 
      checked: checked, 
      emr_id: id, 
      onChange: lang.hitch(this, function(state){ 
       var id = box.get('emr_id'); 
       var name = box.get('name'); 
       this.emit("tick", {emrId:id, name:name, state:state}); 
      }) 
     }, domConstruct.create("div")); 
     box.startup(); 
     return box; 
    } 

}); 

模板

<div class="${baseClass}" data-dojo-attach-point="container" > 
    <table> 
     <tbody data-dojo-attach-point="tableBody"></tbody> 
    </table> 
    <div class="buttonContainer"> 
     <button class="button" data-dojo-type="dijit.form.Button" data-dojo-attach-point="saveButton">${closeLabel}</button> 
    </div> 
</div> 

,然後我把它和使用上(),以從中獲取事件。

 this.dialog = new emrSelection({store: this.emrStore, emrIds: this.emrIds}); 
     this.dialog.startup(); 
     this.dialog.show();