Since this thread seems to be terribly outdated, let me ask a similar question. So, I have a store defined like so:

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'
        }
    }
});

As you can see, it has autoLoad set to false. This is because I do not want to load dozens of stores on page load, I only want to load them, when I need it. For example, in this case I need to load this store, when I show a window with a treepanel inside. The way I show this window is:

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();

But the nasty thing is that when the window shows up for the first time, the tree does not get populated with data, even though I see that server request is triggered. However, when the windows shows up for the second, third, etc. time, everything is ok. So, what is so special with the first time and how to use this autoLoad property in the right way?

Since this thread seems to be terribly outdated, let me ask a similar question. So, I have a store defined like so:

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'
        }
    }
});

As you can see, it has autoLoad set to false. This is because I do not want to load dozens of stores on page load, I only want to load them, when I need it. For example, in this case I need to load this store, when I show a window with a treepanel inside. The way I show this window is:

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();

But the nasty thing is that when the window shows up for the first time, the tree does not get populated with data, even though I see that server request is triggered. However, when the windows shows up for the second, third, etc. time, everything is ok. So, what is so special with the first time and how to use this autoLoad property in the right way?

• javascript
• extjs

• 1 I generally load stores on the "boxready" event of a view, using the store.load method. That way you can also attach a callback to call when the store is loaded. – Gabriel Hautclocq Commented Oct 27, 2016 at 7:16
• because you are assigning the autoload to the item (treepanel) and not to the store. Use load() function instead. – Adrian C. Commented Oct 27, 2016 at 7:17
• @Adrian, I tried both render and afterrender events like: listeners: {render: function () {this.store.load()}}, but in this case I get some library error "r is undefined" and again for the first time the tree is not populated – Jacobian Commented Oct 27, 2016 at 7:21
• 1 store do an async load, a window render is more rapid than a store load, so you shouldn't use render functions to show your tree panel elements if you want them display immediately – LellisMoon Commented Oct 27, 2016 at 7:23

1 Answer 1

You need autoload true on a store if you want the store to load on application start.

You have two opportunities, show window on store load:

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

Or you can try to load the store on before render listeners:

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

In my opinion best solution is the first, Store do an async load, so you'll always see your tree panel populated on his load