Question

我的dgrid有问题....我有一个AccordionContainer，并且在每个ContentPane中，我放了一个dgrid。 dgrid的问题是： 1-滚动错误：向下滚动时，在某些时刻滚动＆＃34;跳过＆＃34;并跳到最后，没有办法向上滚动并显示第一个记录。（我在Firebug中看到错误TypeError：当滚动失败时，grid._rows为null）。 2-尝试更改值：听起来没有发出dgrid-datachange事件，编辑值后无法捕获事件。

我认为这些错误与布局内部的dgrid（在ContentPane内部的dgrid，在AccordionContainer中）有关。我还包括了DijitRegistry扩展，但即使有了这个扩展，我也无法获得摆脱这个错误。我准备了这个小提琴，它重现了错误：

https://jsfiddle.net/9ax3q9jw/5/

代码：

var grid = new (declare([OnDemandGrid, DijitRegistry,Selection, Selector, Editor]))({
            collection: tsStore,
            selectionMode: 'none',
            columns:
                [
                    {id: 'timestamp', label:'Timestamp', formatter: function (value,rowIndex) {
                        return value[0];
                    }},
                    {id: 'value', label: 'Value',
                        get: function(value){
                            return value[1];
                        },
                        editor: "dijit/form/TextBox"
                    }
                ],
            showHeader: true
        });
        grid.startup();
        grid.on('dgrid-datachange',function(event){
            alert('Change!');
           console.log('Change: ' + JSON.stringify(event));
        });

        //Add Grid and TextArea to AccordionContainer.
        var cp = new ContentPane({
            title: tsStore.name,
            content: grid
        },"accordionContainer");

任何帮助将不胜感激，谢谢，天使。

Answer 1

此示例中存在一些可能导致问题的问题。

数据

小提琴中使用的商店是使用数组数组创建的，但商店旨在使用对象数组。这是您看到的滚动问题的根源。每个对象中的一个属性应唯一标识该对象（“id”字段）。如果没有条目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);

以这种方式设置存储还允许简化网格列定义。使用字段名称而不是ID将允许网格使用每个行对象的相应字段值调用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 = [];
        ...
    });
}

或

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();
});

ContentPane中的dgrid - 滚动错误

1 个答案:

数据

载入

布局