Я работаю над шаблонным виджетом для отображения 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>