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(..)するとエラーが発生します。実際には load コールバックでストアにデータを追加します。通常、コールバックは、ストアが実際にロードされた後に何かを行うために使用されます。何をしようとしているのかよくわかりませんが、レコードを処理せずにストアに直接ロードしたいだけなら、プロキシはまったく必要ありません。関数loadStoreは次のようになります。

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