dgrid 标题和内容重叠答案

【问题标题】：dgrid header and contents overlappingdgrid 标题和内容重叠
【发布时间】：2016-08-24 14:36:54
【问题描述】：

我正在开发一个模板化的小部件来显示一个 dgrid。除了标题和内容重叠之外，它似乎工作正常。这是我的Plnkr 代码。有人建议使用 DijitRegistry 创建自定义网格混合，在我的情况下会导致以下错误：

Tried to register widget with id==dijit__TemplatedMixin_0 but that id is already registered.

此外，我按照一些人的建议在两个事件中尝试了 resize() 方法，但这也无济于事。

这是我的代码：

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dijit/themes/claro/claro.css" />
</head>
<body class="claro">
  <div id="myContainer"></div>
  <script type="text/javascript">
    var dojoConfig = {
      async: true,
      parseOnLoad: true
    };
  </script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js"></script>
  <script type="text/javascript">
    require({
    packages: [
        {
            name: 'dgrid',
            location: '//cdn.rawgit.com/SitePen/dgrid/v0.3.16'
        },
        {
            name: 'xstyle',
            location: '//cdn.rawgit.com/kriszyp/xstyle/v0.2.1'
        },
        {
            name: 'put-selector',
            location: '//cdn.rawgit.com/kriszyp/put-selector/v0.3.5'
        }, 
        {
            name: 'myApp',
            location: window.location.href.replace(/\/$/, "")
      }
    ]
}, ["dojo/dom", "dojo/_base/array", "myApp/SimpleTemplatedGridWidget", "dojo/domReady!"], function(dom, arrayUtil, MyWidget) {
      var widget = new MyWidget().placeAt(dom.byId('myContainer'));
    });
  </script>
</body>
</html>

SimpleTempletedGridWidget.js

define([
     "dgrid/extensions/DijitRegistry",
     "dojo/_base/declare",
     "dgrid/OnDemandGrid",
     "dijit/_WidgetBase",
     "dijit/_TemplatedMixin",
     "dojo/text!./SimpleTemplate.html"
],
function (DijitRegistry, declare, Grid, _WidgetBase, _TemplatedMixin, template) {
    return declare([_WidgetBase, _TemplatedMixin], {
        templateString: template, //need to add
        data : [
            { first: 'Bob', last: 'Barker', age: 89 },
            { first: 'Vanna', last: 'White', age: 55 },
            { first: 'Pat', last: 'Sajak', age: 65 }
        ],

        columns : {
            first: 'First Name',
            last: 'Last Name',
            age: 'Age'
        },

        postCreate: function() {
          //myGrid = new (declare([Grid, DijitRegistry]))({
          //Including DijitRegistry in the custom grid as above causes the following error:
          //Tried to register widget with id==dijit__TemplatedMixin_0 but that id 
          //is already registered
            myGrid = new (declare([Grid]))({
                columns: this.columns,
                idProperty: "id"
            }, this.AttachGrid);
            myGrid.renderArray(this.data);
            myGrid.startup();
            //Resize does not fix it
            myGrid.resize();
        },

        //People talk about using resizing the grid in onShow event,
        //but it looks like this event does not fire
        //source: https://github.com/SitePen/dgrid/issues/249
        onShow: function(){
          this.inherited(arguments);
          this.myGrid.resize();
          console.log("Shown!");
        }
    });
});

SimpleTemplate.html

<div data-dojo-attach-point='AttachGrid'></div>

【问题讨论】：

标签： dojo dgrid

【解决方案1】：

您需要在放置网格后调用 resize()（而不是在 postCreate() 中）。您可以通过在网格小部件中添加 resize() 函数来手动执行此操作：

    postCreate: function() {
        this.myGrid = new (declare([Grid]))({
            columns: this.columns,
            idProperty: "id"
        }, this.AttachGrid);
        this.myGrid.renderArray(this.data);
        this.myGrid.startup();
    },

    resize: function() {
        this.myGrid.resize();
    }

在 index.html 中：

  var widget = new MyWidget().placeAt(dom.byId('myContainer'));
  widget.resize();

这是您的代码的一个分支：plnkr

我仍然不知道是什么导致了 DijitRegistry 的错误。

【讨论】：