[CLOSED] [2.1] Example - /Associations/HasMany/Simple/

[jwf]

Regarding this example of a simple HasMany association:

protected void Page_Load(object sender, EventArgs e){
    Store1.Data = this.Users;
}

I have read elsewhere that the Store class behaves differently when data is assigned to the .Data property, as opposed to databinding with .DataSource property. It has something to do with serialization, I think? Can anyone explain the difference between loading data to a store with these two different methods, and when to use each?

<SelectionChange Handler="selected.length && #{ProductsGrid}.bindStore(selected[0].products());" />

Two questions about this.

First, I cannot find any documentation of method .bindStore() on gridpanel or panel. It seems to exist for charts and some other controls, but is not listed in sencha API 4.1.3 definition of panel or gridpanel. Is this method inherited from a base class? Where does it come from? Is examples explorer using a different version of extjs than 4.1? Also, my understanding is that it is supposed to replace the grid's internal store and refresh the view. Correct?

Second, the call to .products() - I believe this is the automatically generated getter function for the HasManyAssociation. As I understand, it returns a store, which is a collection of Product model instances. Is this a synchronous call, i.e. execution waits until it is complete? In this example, the data is already available to the client, so it doesn't matter, but the associated model can also be loaded lazily via proxy, so it is important to know. Can this method accept a callback or object with callback/success/failure similar to the generated getter for HasOne?

[Daniil]

Hi @jwf,

Regarding this example of a simple HasMany association:

protected void Page_Load(object sender, EventArgs e){
    Store1.Data = this.Users;
}

I have read elsewhere that the Store class behaves differently when data is assigned to the .Data property, as opposed to databinding with .DataSource property. It has something to do with serialization, I think? Can anyone explain the difference between loading data to a store with these two different methods, and when to use each?

The Data property is serialized as it is, with all properties, but the DataSource is serialized according Store's Model. I.e. if no ModelField for some property of the bound data, then it won't be serialized.

<SelectionChange Handler="selected.length && #{ProductsGrid}.bindStore(selected[0].products());" />

First, I cannot find any documentation of method .bindStore() on gridpanel or panel. It seems to exist for charts and some other controls, but is not listed in sencha API 4.1.3 definition of panel or gridpanel. Is this method inherited from a base class? Where does it come from? Is examples explorer using a different version of extjs than 4.1? Also, my understanding is that it is supposed to replace the grid's internal store and refresh the view. Correct?

It is a private method of the Ext.panel.Table class, a subclass of the Ext.grid.Panel one.
http://docs.sencha.com/ext-js/4-1/#!...thod-bindStore

<SelectionChange Handler="selected.length && #{ProductsGrid}.bindStore(selected[0].products());" />

Second, the call to .products() - I believe this is the automatically generated getter function for the HasManyAssociation. As I understand, it returns a store, which is a collection of Product model instances. Is this a synchronous call, i.e. execution waits until it is complete? In this example, the data is already available to the client, so it doesn't matter, but the associated model can also be loaded lazily via proxy, so it is important to know. Can this method accept a callback or object with callback/success/failure similar to the generated getter for HasOne?

I don't see these handlers for HasManyAssociation. Not sure why. I will investigate.

[Daniil]

<SelectionChange Handler="selected.length && #{ProductsGrid}.bindStore(selected[0].products());" />

Second, the call to .products() - I believe this is the automatically generated getter function for the HasManyAssociation. As I understand, it returns a store, which is a collection of Product model instances. Is this a synchronous call, i.e. execution waits until it is complete? In this example, the data is already available to the client, so it doesn't matter, but the associated model can also be loaded lazily via proxy, so it is important to know. Can this method accept a callback or object with callback/success/failure similar to the generated getter for HasOne?

I don't see these handlers for HasManyAssociation. Not sure why. I will investigate.

Please look at this example, CustomerGrid.ascx, the loadOrders function.
https://examples2.ext.net/#/Associat...any/Lazy_Load/

It should answer your question

[jwf]

Daniil,

Thanks for your responses thus far!

The Data property is serialized as it is, with all properties, but the DataSource is serialized according Store's Model. I.e. if no ModelField for some property of the bound data, then it won't be serialized.

This is very useful information in the context of associations and lazy loading that I am studying. It is hard to find in the documentation. You might consider adding a note to this effect in the API docs for Store members "Data" and "DataSource".


re:bindStore

It is a private method of the Ext.panel.Table class, a subclass of the Ext.grid.Panel one.

Thanks for explaining this. The particular implementation isn't important, but I think users should be able to locate all the parts used in an Example, so as to "find all magic and destroy it" :)


re:HasManyAssociation getters

Please look at this example, CustomerGrid.ascx, the loadOrders function.

Daniil, I have looked at this example, I still lack full understanding. Please consider:

<script type="text/javascript">    
var loadOrders = function () {
        var grid = this.up("gridpanel"),
            rec = grid.active,
            name = rec.get('Name'),
            owner = grid.ownerCt,
            orders;

        orders = rec.orders();
        if (orders.isLoading()) {
            Ext.net.Bus.publish('App.Log', { msg: 'Begin loading orders: ' + rec.getId(), isStart: true });
        }
        orders.on('load', function () {
            Ext.net.Bus.publish('App.Log', { msg: 'Order store loaded - ' + rec.getId(), isStart: false });
        });

        App.direct.RenderOrders(rec.getId(), owner.id, {
            success: function () {
                owner.getComponent(owner.items.getCount() - 1).bindStore(orders);
                owner.getLayout().next();
            }
        });
    };
</script>

So in this example, the rec parameter is a Customer instance, and we use the HasManyAssociation generated getter "rec.orders();" to retrieve a store containing the Customer's Orders. I had asked if this method accepted a callback or not, here we see that a Store object is immediately returned, even as the proxy continues to load it*. So we can see that the .isLoading() method of the returned store object can be used to mimic synchronicity, or we can subscribe to the load event as an alternative.

However, in this exact example, it is still not clear to me - what if the data processing portion of the call to .orders() takes a long time to respond? Let's say the timeout for the request is 10000ms, and the server responds near the end of this limit. What happens if the success callback for the method App.direct.RenderOrders is called before the orders store is finished loading? Will the call to .bindStore(orders) block on it or throw an exception?

*Is this interpretation correct? Store object is immediately returned, loading goes on in the background via proxy?

[Daniil]

Thank you for the suggestions to improve the docs. Yes, we do need it.

here we see that a Store object is immediately returned, even as the proxy continues to load it*. So we can see that the .isLoading() method of the returned store object can be used to mimic synchronicity, or we can subscribe to the load event as an alternative.

*Is this interpretation correct? Store object is immediately returned, loading goes on in the background via proxy?

Yes, it immediately returns a Store. And immediately starts to load a data only if the AutoLoad setting is true. It is false by default. Well, it behaves as a common Store. So, your interpretation sounds correct.

The isLoading method is used here for the logger only.

However, in this exact example, it is still not clear to me - what if the data processing portion of the call to .orders() takes a long time to respond? Let's say the timeout for the request is 10000ms, and the server responds near the end of this limit. What happens if the success callback for the method App.direct.RenderOrders is called before the orders store is finished loading? Will the call to .bindStore(orders) block on it or throw an exception?

This "orders" store is bound to the component (using the bindStore method). So, this component will listen its events including a load one.

Hope this helps.