PDA

View Full Version : Restrict the stores of grid from being loaded when the project starts.



karnshree
17 Jul 2014, 11:41 AM
Hi all,
I am a begineer to Ext Js 4, i have used Ext Js 3.
My question is related to the store of the grid. I have 20 grids in my project and as my project starts all the 20 stores start loading itself. This delays the loading of my project.

1) What could be the possible measure that could restrict the stores from requesting the server when project starts ?
2) The request to load the store should only be sent when the grid view is called? How can it be achieved?

Please help me out with this.

skirtle
17 Jul 2014, 6:54 PM
Create the stores when you create the corresponding grids and only create the grids as required.

Alternatively, don't set autoLoad to true on the stores and manually call load when the grid is 'called'. You haven't really defined what you mean by 'called' but assuming some form of tabbed interface you could perform the load call when each tab is first shown. However, personally I'd go a step further and create the children in an override of the beforeRender method of each tab so that the grid is only created when the tab is first shown.

karnshree
17 Jul 2014, 8:34 PM
Thanks Skirtle for your quick reply.

By saying called, i intended to say, when the view of the Grid Panel is invoked on a click.

I have the autoLoad property of the grid set to false.

I know i am doing some mistake. Because as the project loads, all the stores try loading themselves.
As i click to open a Grid, again two requests are sent to the server for that specific grid to get loaded.
If you could please tell me, what properties of the grid make the store request to the server to load the data.
I feel one is the "store" property itself.
Another is the this.getStore().load()
this.getStore().reload() and this.getStore().refresh();

If some else property could also trigger the request to load the store of the grid, then please tell me. Also tell me if i am wrong with the above concepts.

Thanks.

skirtle
18 Jul 2014, 12:44 AM
By saying called, i intended to say, when the view of the Grid Panel is invoked on a click.

I have no idea what you mean by this. The term 'invoked' is no clearer than 'called'. Grids cannot be 'invoked' - perhaps you mean one of 'created', 'rendered' or 'shown'?

I'm trying to understand two things: what causes the grid to be shown and when you want the store to load.


I have the autoLoad property of the grid set to false.

Grids don't have an autoLoad property. autoLoad is a config option for a store. It defaults to false.


Because as the project loads, all the stores try loading themselves.

How are the stores being created? Generally you should define store classes when the project is loading but only create the instances when they're required.

See 'One Store to Rule Them All':

http://www.sencha.com/blog/top-support-tips-june-2013


As i click to open a Grid, again two requests are sent to the server for that specific grid to get loaded.
If you could please tell me, what properties of the grid make the store request to the server to load the data.

Grids generally don't load stores. However, things like clicking a column header with remote sorting can cause a load.

Perhaps the easiest way to track this down is to add a load event listener like this:


listeners: {
load: function() {
debugger;
}
}

Then open the Chrome debug tools and check the 'Async' checkbox under Sources/Call Stack. This will give you a call stack that shows where the loading initiated.

I'd also suggest adding some console logging throughout the relevant code in your app. There's a good chance you're calling load twice without realising it. You could, for example, have inadvertently registered the click listener twice.