分机。在渲染时加载商店答案

【问题标题】：ExtJS. Load a store on render分机。在渲染时加载商店
【发布时间】：2016-10-27 15:26:36
【问题描述】：

既然这个thread 似乎已经过时了，让我问一个类似的问题。所以，我有一个 store 定义如下：

Ext.define('GeoServer.store.ObjectsStore', {
    extend: 'Ext.data.TreeStore',
    requires: ['GeoServer.model.ObjectsModel'],
    model: 'GeoServer.model.ObjectsModel',
    autoLoad: false,
    proxy: {
        type: 'ajax',
        url: 'controller/MapsHandler.php',
        extraParams: {
            action: 'listObjects'
        }
    }
});

如您所见，它已将autoLoad 设置为false。这是因为我不想在页面加载时加载几十个商店，我只想在需要时加载它们。例如，在这种情况下，当我显示一个带有treepanel 的窗口时，我需要加载这个商店。我显示这个窗口的方式是：

Ext.create("Ext.window.Window",{ 
    title: "Objects",
    height: size.height,
    width: size.width,
    constrainHeader:true,
    layout:"fit",
    maximizable:true,
    items:[{
        xtype: 'treepanel',
        rootVisible: false,
        scrollable: true,
        itemId: 'Objects',
        store: 'ObjectsStore',
        border: false,
        autoLoad: true // has no effect
    }]
}).show();

但令人讨厌的是，当窗口第一次出现时，树并没有填充数据，即使我看到服务器请求被触发。但是，当窗口出现第二次、第三次等时，一切正常。那么，第一次有什么特别之处以及如何以正确的方式使用这个autoLoad 属性？

【问题讨论】：

我通常使用 store.load 方法在视图的“boxready”事件上加载商店。这样，您还可以在加载商店时附加一个回调来调用。
因为您将自动加载分配给项目（树形面板）而不是商店。请改用 load() 函数。
@Adrian，我尝试了render 和afterrender 之类的事件：listeners: {render: function () {this.store.load()}}，但在这种情况下，我收到了一些库错误“r 未定义”，这是第一次树没有填充
store 进行异步加载，窗口渲染比 store 加载更快，因此如果您希望它们立即显示，则不应使用渲染函数来显示树面板元素

标签： javascript extjs

【解决方案1】：

如果您希望商店在应用程序启动时加载，您需要在商店上自动加载 true。

您有两个机会，在商店加载时显示窗口：

    var store=Ext.getStore('ObjectsStore'),
         view=this.getView();
     view.mask('loading');
     store.on('load',function(){
         view.unmask();
         YourWindow.show();
     });
     store.load();

或者您可以尝试在渲染侦听器之前加载商店：

listeners:{
   beforerender: function(){
      Ext.getStore('ObjectsStore').load();
   }
}

在我看来，最好的解决方案是第一个，Store 执行异步加载，所以你总是会看到你的树面板填充在他的加载中

【讨论】：

谢谢！我会在一分钟内检查它。
您应该为您的商店设置一个 storeId 以使用 ext.getStore 获取它