0

我基于 Sencha 的例子；但是，我没有使用 url 来填充商店，而是尝试创建一个空的并向其中添加一个项目。当我加载页面时，该项目已成功显示在面板中；但是，我收到一条错误消息

Line: 18
Error: Unable to get value of the property 'dataSource': object is null or undefined

我的模型如下所示：

Ext.define('Ext.model.Test', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'testName', type: 'string' },
        { name: 'hasTestPassed', type: 'bool' },
        { name: 'hasFix', type: 'bool' }
    ]
});

我的代码如下所示：

Ext.define('Ext.app.ServerChecker', {
    extend: 'Ext.grid.Panel',
    requires: [
        'Ext.selection.CellModel',
        'Ext.grid.*',
        'Ext.data.*',
        'Ext.util.*',
        'Ext.form.*',
        'Ext.model.Test'
    ],
    alias: 'widget.ServerChecker',
    xtype: 'cell-editing',

    initComponent: function () {
        this.cellEditing = new Ext.grid.plugin.CellEditing({
            clicksToEdit: 1
        });

        Ext.apply(this, {
            width: this.width,
            store: new Ext.data.Store({
                // destroy the store if the grid is destroyed
                autoDestroy: true,
                model: Ext.model.Test,
                proxy: {
                    type: 'memory',
                    reader: {
                        type: 'json',
                        record: 'test'
                    }
                },
                sorters: [{
                    property: 'common',
                    direction: 'ASC'
                }]
            }),

            columns: [{
                header: 'Test Name',
                dataIndex: 'testName',
                flex: 1,
                editor: {
                    allowBlank: false
                }
            }, {
                header: 'Result',
                dataIndex: 'hasTestPassed',
                width: '75px',
                align: 'right',
                editor: {
                    allowBlank: false
                }
            }, {
                xtype: 'actioncolumn',
                width: 30,
                sortable: false,
                menuDisabled: true,
                items: [{
                    icon: 'resources/images/icons/fam/delete.gif',
                    tooltip: 'Delete Plant',
                    scope: this,
                    handler: this.onRemoveClick
                }]
            }],
            selModel: {
                selType: 'cellmodel'
            },
            tbar: [{
                text: 'Run Tests',
                scope: this,
                handler: this.onRunTestsClick
            }]
        });

        this.callParent();

        this.on('afterlayout', this.loadStore, this, {
            delay: 1,
            single: true
        })
    },

    loadStore: function () {
        this.getStore().load({
            // store loading is asynchronous, use a load listener or callback to handle results
            callback: this.onStoreLoad
        });
    },

    onStoreLoad: function () {
        var rec = new Ext.model.Test({
            testName: 'Yipiee',
            hasTestPassed: true,
            hasFix: true
        });
        this.getStore().insert(0, rec);
        this.cellEditing.startEditByPosition({
            row: 0, 
            column: 0
        });
    },

    onRemoveClick: function (grid, rowIndex) {
        this.getStore().removeAt(rowIndex);
    }
})

任何帮助将不胜感激。我意识到我正在一个奇怪的地方加载数据；但是，这是出于测试目的，看起来应该可以正常工作。

提前致谢。

4

1 回答 1

1

您正在使用内存代理定义存储，它期望存储在加载时具有数据属性。所以，当你这样做时，你this.getStore().load(..)会得到一个错误。您实际上在加载回调中将数据添加到存储中，通常回调用于在存储实际加载后执行某些操作。我不太了解您要做什么，但是如果您只想将记录直接加载到存储中，而不进行任何处理，则根本不需要代理。您的loadStore函数可能如下所示：

loadStore: function () {
    var obj = {
        testName: 'Yipiee',
        hasTestPassed: true,
        hasFix: true
    };
    this.getStore().add(obj);
}
于 2013-06-19T18:56:49.367 回答