[CLOSED] Render using store

[bayoglu]

Hello,

How is it possible to render a grid panel after binding another store?Well, exact scenario is as below:

GridPanel1 > Column X > render function uses Store2 (different from grid panel store). During the page load, Store2 is not ready yet so rendering fails (not showing properly). I want to cancel rendering of grid panel until binding Store 2 at client side and after successful bind I want to render grid panel. What is the correct way of doing this? I don't want to just trigger rendering of grid panel after Store 2 bind, also prevent unnecessary rendering of grid items before Store 2 is ready.

Thanks.

[Vladimir]

Just set AutoLoad=false for grid's store and trigger loading in the Load handler of Store2

<Load Handler="#{GridPanel1}.store.load();" />

[bayoglu]

Just set AutoLoad=false for grid's store and trigger loading in the Load handler of Store2

<Load Handler="#{GridPanel1}.store.load();" />

Thank you Vladimir. Mark as closed please.

[bayoglu]

Just set AutoLoad=false for grid's store and trigger loading in the Load handler of Store2

<Load Handler="#{GridPanel1}.store.load();" />

Hello Viladimir, sorry for marking as solved but I face another case relating to this post. Let me know if I should open a new threat.
What if there are 3 columns in grid each is rendered using different stores? I can still set autoload = false but link loading of grid to which store's load handler? would it be bad for perfomance to load each store sequentially?

RenderStore1 load handler > RenderStore2 load handler > RenderStore3 load handler > grid store load.

Would this have a bad impact on performance?

[Daniil]

Well, a GridPanel supports a single Store to be associated with.

In your scenario you might need to set up a separate Store for the GridPanel.

When all data is loaded to the all other Stores, put this data to the GridPanel's Store (maybe, using the Store's loadData method).
http://docs.sencha.com/ext-js/4-1/#!...ethod-loadData

But it is a strange scenario where you need three Stores for a single GridPanel.

Maybe, there is a better solution. But we need more details about your case to suggest something.

[bayoglu]

Well, a GridPanel supports a single Store to be associated with.

In your scenario you might need to set up a separate Store for the GridPanel.

When all data is loaded to the all other Stores, put this data to the GridPanel's Store (maybe, using the Store's loadData method).
http://docs.sencha.com/ext-js/4-1/#!...ethod-loadData

But it is a strange scenario where you need three Stores for a single GridPanel.

Maybe, there is a better solution. But we need more details about your case to suggest something.

Hello Daniil, I think there is misunderstanding. GridPanel has one store associated with. The other stores are required for rendering purposes only. Scenario is as below:

(GridPanel : Column A, Colum B, Column C) > (GridStore : dataA, dataB, dataC)
(StoreA: dataA, label A)
(StoreB: dataB, label B)
(StoreC: dataC, label C)

imagine that GridStore has ID information of UserID, ColorID, CountryID.
StoreA containts Username for UserIDs
StoreB contains ColorCode for ColorIDs
StoreC contains CountryName for CountryIDs

I am rendering columns A, B, C as UserName, ColorCode, and CountryName using StoreA/B/C.getById(value).data.Attribute in column render function.

What I am currently doing is as below:
Set GridStore, StoreA, and StoreB auto load = false.
StoreC autoload is true and load handler is StoreB.load.
StoreB load handler is StoreA.load.
Store A load handler is GridStore.load.

By this way, I am ensuring that GridPanel is loaded/and rendered after all other required stores are loaded sequentially. The question: Is this the correct way if information required to render grid columns is placed in other stores. Does this method have a bad impact on performance? If all store information is anyway loaded to the client side even if autoload=false, and calling store.load is only a client side operation, that it might not have a bad impact on performance. If not, what is the suggested way of doing this? Colud you comment on this?

Thanks.

[Daniil]

I think the Stores A, B, C can be loaded at the same time.

So, I would set up AutoLoad="true" (it is by default) for all and set up AutoLoad="false" just for the GridPanel's Store.

Then define a global variable like this (or a custom property of the GridPanel or its Store).

var SomeNamespace = {
    countOfLoadedStore: 0
};

And set up the following Load listeners for the Stores A, B and C.

<Load Handler="SomeNamespace.countOfLoadedStore++; 
               if (SomeNamespace.countOfLoadedStore++;) {
                   gridStore.load();
               }" />

If the GridPanel's Store have to wait all the Stores to be loaded, then, I think there is no better way for performance.

[bayoglu]

I think the Stores A, B, C can be loaded at the same time.

So, I would set up AutoLoad="true" (it is by default) for all and set up AutoLoad="false" just for the GridPanel's Store.

Then define a global variable like this (or a custom property of the GridPanel or its Store).

var SomeNamespace = {
    countOfLoadedStore: 0
};

And set up the following Load listeners for the Stores A, B and C.

<Load Handler="SomeNamespace.countOfLoadedStore++; 
               if (SomeNamespace.countOfLoadedStore++;) {
                   gridStore.load();
               }" />

If the GridPanel's Store have to wait all the Stores to be loaded, then, I think there is no better way for performance.

Hello Daniil,
If I get it right, you meant below load handler right?

<Load Handler="SomeNamespace.countOfLoadedStore++; 
               if (SomeNamespace.countOfLoadedStore==3) {  //changed this part
                   gridStore.load();
               }" />

by this way should I worry about global variable access? In other words, can we be sure that even concurrent execution of SomeNamespace.countOfLoadedStore++; will result increment of counter? My doubt is concurrent requests may cancel other and counter never reaches to limit 3 (and grid store is never loaded). What is your comment on this?
Thanks.

[Daniil]

You were right to change to:

if (SomeNamespace.countOfLoadedStore == 3)

I, well, mistyped.


If a Store is loaded, its Load event will be fired for sure. So, a counter will be incremented for sure.

A Load listener is fired on unsuccessful load (including time out of a request or server exception). There is just a "successful" flag passed to a listener.
http://docs.sencha.com/ext-js/4-1/#!...ore-event-load

[bayoglu]

You were right to change to:

if (SomeNamespace.countOfLoadedStore == 3)

I, well, mistyped.


If a Store is loaded, its Load event will be fired for sure. So, a counter will be incremented for sure.

A Load listener is fired on unsuccessful load (including time out of a request or server exception). There is just a "successful" flag passed to a listener.
http://docs.sencha.com/ext-js/4-1/#!...ore-event-load

Ok thanks.