Question

Extjs 4.3.1我有一个正在加载javascript数组的网格。数组已填充，但加载页面时不会显示任何内容。当您单击Ext.toolbar停靠栏中的刷新按钮时，会显示项目。

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

代码

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"
    },...

Answer 1

如果没有加载网格，那么当你将一个监听器添加到gridPanel以获得＆＃39; onRender时会得到什么？您的商店中的数据是否可以在网格上呈现？

http://docs.sencha.com/extjs/4.2.4/#!/api/Ext.grid.Panel-event-render

Answer 2

使用ajax或store.load（）创建网格之前填充商店。在您的情况下发生的是，在呈现网格时，商店尚未完成加载。这就是刷新数据的原因，而不是渲染。

＆＃39;没有要显示的数据＆＃39;加载gridstore时的消息Ext JS

2 个答案: