dgrid внутри ContentPane - ошибка прокрутки

В этом примере есть несколько проблем, которые могут вызвать у вас проблемы.

Данные

Хранилище, используемое в скрипке, создается с массивом массивов, но хранилища предназначены для работы с массивами объектов. Это корень проблемы с прокруткой, которую вы видите. Одно свойство в каждом объекте должно однозначно идентифицировать этот объект (поле «id»). Без идентификаторов записей сетка не может должным образом отслеживать записи в вашем наборе данных. Массив данных можно легко преобразовать в массив объектов, где каждая запись имеет свойства timestamp и value, а хранилище может использовать timestamp в качестве своего свойства 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);

Такая настройка хранилища также позволяет упростить определения столбцов сетки. Использование имен полей вместо идентификаторов позволит сетке вызывать formatter функций с соответствующим значением поля для каждого объекта строки.

columns: [{
    field: 'timestamp',
    label: 'Timestamp',
    formatter: function (value) {
        return value;
    }
}, {
    field: 'value',
    label: 'Value',
    formatter: function (value) {
        return value;
    },
    editor: "dijit/form/TextBox"
}],

Загрузка

Скрипка использует декларативные виджеты и функцию автоматического синтаксического анализа Dojo для построения страницы. В этой ситуации обратный вызов загрузчика не ожидает завершения синтаксического анализатора перед выполнением, поэтому экземпляры виджетов могут не создаваться во время выполнения обратного вызова.

Есть два способа справиться с этим: dojo/ready или явное использование парсера.

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

or

parseOnLoad: false,
deps: [
    ...
    dojo/parser,
    dojo/domReady! 
],
callback: function (..., parser) {
    parser.parse().then(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();
});