Question

我的基础是Sencha的例子;然而，我没有使用网址来填充商店，而是尝试创建一个空的并向其添加一个项目。当我加载页面时，该项目成功显示在面板中;但是，我收到错误说

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

非常感谢任何帮助。我意识到我正在加载一种奇怪的数据;但是，这是出于测试目的，看起来应该可以正常工作。

提前致谢。

Answer 1

您正在使用内存代理定义商店，期望商店在加载时具有数据属性。因此，当您this.getStore().load(..)时，您会收到错误消息。实际上，您在加载回调中将数据添加到商店，通常回调用于在实际加载商店后执行某些操作。我真的不明白你想要做什么，但如果你只是想直接将记录加载到商店，而不进行任何处理，你根本不需要代理。您的loadStore函数可能如下所示：

loadStore: function () {
    var obj = {
        testName: 'Yipiee',
        hasTestPassed: true,
        hasFix: true
    };
    this.getStore().add(obj);
}

ExtJS错误：无法获取属性'dataSource'的值

1 个答案: