Javascript '；没有要显示的数据'；gridstore加载到Ext JS时的消息

extjs4.3.1

我有一个用javascript数组加载的网格。数组已填充，但加载页面时，不会显示任何内容。单击

Ext.toolbar

dock中的刷新按钮时，将显示项目

如何在呈现页面而不是选择刷新按钮时加载数据

代码

var grid = [],
        title = 'Topics List',
        gridHeight = 600,
        uniqueId = 'topics',
        dSort = 'modified',
        dSortOrder = 'DESC';
    var items = [];

    Ext.define('Model', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'title', type: 'string'},
        {name: 'description', type: 'string'},
        {name: 'updated', type: 'date'},
        {name: 'state', type: 'string'}
    ]
    });
    var gridStore = Ext.create('Ext.data.Store', {
        model: 'Model',
        autoload: true,
        proxy: {
            type: 'ajax',
            url: url,
            reader: {
                type: 'json',
                root: 'entry',
                idProperty: 'title'
            }
        },
            fields: [{
                name: 'title',
                type: 'string'
            }, {
                name: 'description',
                type: 'string'
            }, {
                name: 'updated',
                type: 'date',
                format: 'm/d/Y'
            }, {
                name: 'state',
                type: 'string'
            }],
            sorters: [{
                property: 'updated',
                direction: 'DESC'
            },{
                property: 'title',
                direction: 'DESC'
                }
            ],
            listeners: {
                render: function () {
                    gridStore.load();
                }
            }

        });

        var searchField = new SearchField({store: gridStore, width: 300});
        var filters = {
            ftype: 'filters',
            // encode and local configuration options defined previously for easier reuse
            encode: false, // json encode the filter query
            local: true   // defaults to false (remote filtering)

        };
        var searchBar = Ext.create('Ext.toolbar.Toolbar', {
            cls: 'x-toolbar-top',
            items: ['Search: ', ' ', searchField, {xtype: 'tbfill'}]
        });
        var clearButton = Ext.create('Ext.Button', {
            text: 'Clear Filter Data',
            handler: function () {
                grid[uniqueId].filters.clearFilters();
            }
        });
        var openButton = Ext.create('Ext.Button', {
            text: 'Open Topics',
            handler: function () {
                var filter = grid[uniqueId].filters.getFilter('state');
                if (!filter) {
                    filter = grid[uniqueId].filters.addFilter({
                        type: 'string',
                        dataIndex: 'state'
                    });
                }
                filter.setActive(true);
                filter.setValue('Open/Current');
            }
        });
        var holdButton = Ext.create('Ext.Button', {
            text: 'On Hold Topics',
            handler: function () {
                var filter = grid[uniqueId].filters.getFilter('state');
                if (!filter) {
                    filter = grid[uniqueId].filters.addFilter({
                        type: 'string',
                        dataIndex: 'state'
                    });
                }
                filter.setActive(true);
                filter.setValue('Hold');
            }
        });
        var closedButton = Ext.create('Ext.Button', {
            text: 'Closed Topics',
            handler: function () {
                var filter = grid[uniqueId].filters.getFilter('state');
                if (!filter) {
                    filter = grid[uniqueId].filters.addFilter({
                        type: 'string',
                        dataIndex: 'state'
                    });
                }
                filter.setActive(true);
                filter.setValue('Archived/Closed');
            }
        });

        var createColumns = function () {

            var columns = [{
                text: 'Title',
                width: 260,
                dataIndex: 'title',
                filterable: true
            }, {
                text: 'Description',
                flex: 1,
                dataIndex: 'description',
                filter: {
                    type: 'string'
                    // specify disabled to disable the filter menu
                    //, disabled: true
                }
            }, {
                text: 'Status',
                width: 100,
                dataIndex: 'state',
                filter: {
                    active: true,
                    type: 'list',
                    //value: 'Open/Current',
                    options: ['Open/Current', 'Archived/Closed', 'Hold']

                }
            }, {
                text: 'Modified',
                width: 90,
                dataIndex: 'updated',
                xtype: 'datecolumn',
                format: 'm/d/Y',
                filter: true
            }];

            return columns;
        };
        grid[uniqueId] = Ext.create('Ext.grid.GridPanel', {
            renderTo: uniqueId,
            store: gridStore,
            tbar: [
                searchBar,
                openButton,
                holdButton,
                closedButton,
                clearButton
            ],
            columns: createColumns(),
            enableColumnHide: true,
            enableColumnMove: true,
            height: gridHeight,
            title: title,
            loadMask: true,
            features: [filters],
            dockedItems: [Ext.create('Ext.toolbar.Paging', {
                dock: 'bottom',
                store: gridStore,
                displayInfo: true
            })],
        listeners: {
            render: function () {
                gridStore.load();
            }
        }
        });

JSON-ex

"entry": [{
        "title": "Alternative Methods",
        "shortTitle": "LCRs",
        "description": "This project is a carryover from the 2017 effort.",
        "govStatus": "Progress",
        "state": "Open/Current",
        "dateCreated": "",
        "targetComplete": "",
        "updated": "2017-08-14T10:58:19"
    },...

---

如果网格没有加载，那么在为“onRender”向gridPanel添加侦听器时会得到什么？存储中的数据在网格渲染中可用吗

---

在使用ajax或store.load（）创建网格之前，先填充存储。在您的情况下，存储在呈现网格时尚未完成加载。这就是为什么在刷新时数据在那里而不是在渲染时

我稍微修改了代码，以便gridstore使用

ajax

调用而不是内存进行加载，并在gridpanel上添加了一个侦听器来加载存储，但在按下刷新按钮之前，我仍然无法加载任何数据。是否有可能在渲染后加载数据，因此数据不会附着到网格？还有，我用你上面的代码写了这把小提琴。看看是否有帮助。我注释掉了一些工具栏按钮。