新的 dojo dgrid 小部件无法正常工作并显示在自定义小部件中

Question

我正在开发一个 dojo 网格，它是新的 dojo dgrid，但我通过调用 html 标记文件上的 id 来使 dgrid 工作，但我需要创建一个小部件，类似于将我的网格放入其中并成为能够使用 dojotype 通过 html 访问它。

我花了大约三天的时间来解决这个问题，但由于某种原因，如果我在我创建的小部件中声明它，我的网格不会显示。

下面是我的代码示例：

require([
  "dojo/_base/declare", "dojo/dom-construct", "dojo/parser", "dojo/ready",
  "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dgrid/Grid", "dgrid/Keyboard",
  "dgrid/Selection","dojo/text!./templates/dumHTML.html", "dojo/domReady!"
], function(declare, domConstruct, parser, ready, _WidgetBase, _TemplatedMixin, Grid, Keyboard, Selection, template) {

  declare("Grid", [_WidgetBase, _TemplatedMixin], {

    templateString: template,
    widgetsInTemplate: true,

    postCreate: function() {
      var self = this;
      this.inherited(arguments);
      this._showGrid();
    },

    _showGrid: function() {

      //json data string
      var gridData =[
        {'id': '10', 'filename':'budget.pdf','icon':'pdf'},
        {'id': '20', 'filename':'thevampirediary.avi','icon':'xsl'},
        {'id': '30', 'filename':'budget2.xsl','icon':'xsl'},
        {'id': '40', 'filename':'budget3.doc','icon':'doc'},
        {'id': '50', 'filename':'thevampirediary.avi','icon':'xsl'}
      ];

      // Create a new constructor by mixing in the components
      var DGrid = declare([Grid, Keyboard, Selection]);

      var grid = new DGrid( {
        columns: {
          ID: {
            label: " ",
            field: "id",
            hidden: true,
            sortable: false,
            formatter: function(id) {
              return '<div style="visibility: hidden>'+id+' </div>';
            }
          },
          filename: {
            field: "filename",
            label: "File name",
            sortable: true,
            formatter: function(filename) {
              return '<div style="float:left ">'+filename+' </div>';
            }
          },
          icon: {
            field: "icon",
            label:" ",
            sortable: false,
            formatter: function(icon) {
              return '<img src="resources/' + icon + '.png" width="20px" hieght="20px"/>';
            }
          }
        },

        // for Selection; only select a single row at a time
        selectionMode: "single",

        // for Keyboard; allow only row-level keyboard navigation
        cellNavigation: true

      }, "grid");

      grid.renderArray(gridData);
    }

  });

  ready( function() {
    // Call the parser manually so it runs after our widget is defined,
    // and page has finished loading
    parser.parse();
  });
});

Answer 1

我只是 dgrid 的初学者，遇到了同样的问题。看完这篇文章，我解决了。 https://github.com/SitePen/dgrid/wiki/Working-with-Widgets 解决方案是：在 Dgrid 实例中混合 DijitRegistry。

这是我的代码。希望对初学者有所帮助。 ModuleWithGuideBar 是我的自定义小部件（使用 TemplatedMixin 声明，_WidgetsInTemplateMixin）。

define([
    "dojo/_base/declare",
    "dijit/registry",
    "common/widget/ModuleWithGuideBar",
    "dgrid/OnDemandGrid",
    "dgrid/Keyboard",
    "dgrid/Selection",
    "dgrid/extensions/DijitRegistry",
    "dojo/store/Memory",
    "dijit/layout/ContentPane"
], function (declare, registry, ModuleWithGuideBar, OnDemandGrid, Keyboard, Selection, DijitRegistry, Memory, ContentPane) {
    return declare("app.management.module.event", [ModuleWithGuideBar], {
        class:"module_event",
        _grid:null,
        postCreate:function () {
            this.inherited(arguments);

            var gridContainer = new ContentPane({region:'center'});
            //add to data-dojo-attach-point
            this.moduleContent.addChild(gridContainer);
            var memoryStore = new Memory({data:[
                { first:"Bob", last:"Barker", age:89 },
                { first:"Vanna", last:"White", age:55 },
                { first:"Pat", last:"Sajak", age:65 }
            ]});
            this._grid = new declare([OnDemandGrid, Keyboard, Selection, DijitRegistry])({
                columns:{
                    first:{ label:"first" },
                    last:{ label:"last" },
                    age:{ label:"age" }
                },
                store:memoryStore
            });
            gridContainer.addChild(this._grid);
        }
    });
});