Dojo 内容窗格内的dgrid-滚动错误

我对德格里德有意见。。。。我有一个AccordionContainer，在它的每个内容窗格中， 我放置了一个dgrid。dgrid的问题有： 1-滚动错误：向下滚动时，在特定时刻滚动会跳过并跳到末尾，无法向上滚动并显示第一条记录。 我在Firebug中看到了错误TypeError:grid.\u当滚动失败时，行为空。 2-尝试更改值：听起来好像没有发出dgrid datachange事件， 无法在编辑值后捕获事件

我认为这些错误与dgrid在布局中，dgrid在ContentPane中，AccordionContainer中有关。我还包括了DijitRegistry扩展，但即使使用这个扩展，我也无法获得 消除这些错误。 我准备了这把小提琴，它再现了错误：

代码：

任何帮助都将不胜感激， 谢谢

---

安琪尔

本例中有几个问题可能会给您带来问题

数据 fiddle中使用的存储是使用数组数组创建的，但存储旨在使用对象数组。这是您看到的滚动问题的根源。每个对象中的一个属性应在“id”字段中唯一标识该对象。没有条目ID，网格无法正确跟踪数据集中的条目。数据数组可以很容易地转换为对象数组，其中每个条目都具有时间戳和值属性，并且存储可以使用时间戳作为其ID属性—它用于唯一标识每个记录的属性

var records = [];
var data = _globalData[0].data;
var item;
for (var i = 0; i < data.length; i++) {
    item = data[i];
    records.push({
        timestamp: item[0],
        value: item[1]
    });
}

var tsStore = new declare([Memory, Trackable])({
    data: records,
    idProperty: 'timestamp',
    name: 'Temperature'
});
_t._createTimeSeriesGrids(tsStore);

加载 fiddle使用声明性小部件和Dojo的自动解析功能来构建页面。在这种情况下，加载程序回调在执行之前不会等待解析器完成，因此当回调运行时，小部件可能没有被实例化

有两种方法可以处理这个问题：dojo/ready或显式使用解析器

parseOnLoad: true,
deps: [
    ...
    dojo/ready,
    dojo/domReady! 
],
callback: function (..., ready) {
    ready(function () {
        var _t = this;
        var _globalData = [];
        ...
    });
}

或

布局 在将小部件添加到容器时，请使用Dijit的方法，如addChild和set'content'。。。。它们通常执行的操作不仅仅是向DOM添加小部件，比如启动子小部件

var cp = new ContentPane({
    title: tsStore.name,
    content: grid
});
registry.byId('accordionContainer').addChild(cp);

而不是

var cp = new ContentPane({
    title: tsStore.name,
    content: grid
}, "accordionContainer");

在示例代码中，甚至不需要ContentPane，因为dgrid继承自DijitRegistry-它可以直接添加为AccordionContainer的子级。 这还将调用网格的启动方法，因此不需要在代码中显式调用

registry.byId('accordionContainer').addChild(grid);

在最初渲染网格后，通常还需要重新布局网格的容器，以确保其大小正确

var handle = grid.on('dgrid-refresh-complete', function () {
    registry.byId('accordionContainer').resize();
    // only need to do this the first time
    handle.remove();
});

---

本例中有几个问题可能会给您带来问题

数据 fiddle中使用的存储是使用数组数组创建的，但存储旨在使用对象数组。这是您看到的滚动问题的根源。每个对象中的一个属性应在“id”字段中唯一标识该对象。没有条目ID，网格无法正确跟踪数据集中的条目。数据数组可以很容易地转换为对象数组，其中每个条目都具有时间戳和值属性，并且存储可以使用时间戳作为其ID属性—它用于唯一标识每个记录的属性

var records = [];
var data = _globalData[0].data;
var item;
for (var i = 0; i < data.length; i++) {
    item = data[i];
    records.push({
        timestamp: item[0],
        value: item[1]
    });
}

var tsStore = new declare([Memory, Trackable])({
    data: records,
    idProperty: 'timestamp',
    name: 'Temperature'
});
_t._createTimeSeriesGrids(tsStore);

加载 fiddle使用声明性小部件和Dojo的自动解析功能来构建页面。在这种情况下，加载程序回调在执行之前不会等待解析器完成，因此当回调运行时，小部件可能没有被实例化

有两种方法可以处理这个问题：dojo/ready或显式使用解析器

parseOnLoad: true,
deps: [
    ...
    dojo/ready,
    dojo/domReady! 
],
callback: function (..., ready) {
    ready(function () {
        var _t = this;
        var _globalData = [];
        ...
    });
}

或

布局 在将小部件添加到容器时，请使用Dijit的方法，如addChild和set'content'。。。。它们通常执行的操作不仅仅是向DOM添加小部件，比如启动子小部件

var cp = new ContentPane({
    title: tsStore.name,
    content: grid
});
registry.byId('accordionContainer').addChild(cp);

而不是

var cp = new ContentPane({
    title: tsStore.name,
    content: grid
}, "accordionContainer");

在示例代码中，甚至不需要ContentPane，因为dgrid继承自DijitRegistry-它可以直接添加为AccordionContainer的子级。 这还将调用网格的启动方法，因此不需要在代码中显式调用

registry.byId('accordionContainer').addChild(grid);

在最初渲染网格后，通常还需要重新布局网格的容器，以确保其大小正确

var handle = grid.on('dgrid-refresh-complete', function () {
    registry.byId('accordionContainer').resize();
    // only need to do this the first time
    handle.remove();
});

---

嗨，杰森，谢谢你的回复。如果在商店里添加ID，效果会非常好。我现在没有滚动的问题。但现在更新dgrid值的问题仍然存在。。。。我无法“捕获”dstore/dgrid上的更新事件。。。。我已经“聆听”了grid.on'dgrid-datachange'和tsStore.on'update'，但似乎编辑器插件没有触发事件。。。。有线索吗？提前感谢，grid.on'dgrid-datachange'应该可以很好地工作您的原始示例中的侦听器对我来说很好。请注意，它仅在编辑器失去焦点时才会触发，因此您必须在触发事件之前单击或从输入中移出选项卡。若要为存储触发存储的更新事件，请在“更新”上启用aut

---

编辑栏的oSave。网格编辑过程分为两个部分：更新网格单元值和实际将这些更改保存到网格中。默认情况下，更改值只会更新网格，您必须调用grid.save yourself。在列定义中将autoSave设置为true将导致网格在值更改时自动保存对存储的更改。在FIDLE和实际项目中，“dgrid datachange”对我不起作用。但我找到了解决办法。。。我必须用编辑器在列的定义中添加'field'属性，现在它可以工作了。我不得不观看Editor.js代码，它需要column.field属性。关于商店更新。。。是的，我试过使用autoSave属性。我试过使用autoSave，但没有使用autoSave和grid。saveHi Jason，感谢您的回复。如果在商店里添加ID，效果会非常好。我现在没有滚动的问题。但现在更新dgrid值的问题仍然存在。。。。我无法“捕获”dstore/dgrid上的更新事件。。。。我已经“聆听”了grid.on'dgrid-datachange'和tsStore.on'update'，但似乎编辑器插件没有触发事件。。。。有线索吗？提前感谢，grid.on'dgrid-datachange'应该可以很好地工作您的原始示例中的侦听器对我来说很好。请注意，它仅在编辑器失去焦点时才会触发，因此您必须在触发事件之前单击或从输入中取出制表符。若要为存储触发存储的更新事件，请在“更新”上启用“编辑器”列的自动保存。网格编辑过程分为两个部分：更新网格单元值和实际将这些更改保存到网格中。默认情况下，更改值只会更新网格，您必须调用grid.save yourself。在列定义中将autoSave设置为true将导致网格在值更改时自动保存对存储的更改。在FIDLE和实际项目中，“dgrid datachange”对我不起作用。但我找到了解决办法。。。我必须用编辑器在列的定义中添加'field'属性，现在它可以工作了。我不得不观看Editor.js代码，它需要column.field属性。关于商店更新。。。是的，我试过使用autoSave属性。我尝试过使用autoSave，但没有使用它和grid.save