当网格存储加载时'没有数据显示'消息分机JS

Extjs 4.3.1我有一个正在加载一个javascript数组的网格。该数组已填充，但页面加载时不显示任何内容。当您点击Ext.toolbar底座中的刷新按钮时，出现项目。当网格存储加载时'没有数据显示'消息分机JS

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

代码

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前

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

来源

2017-09-20 PT_C