PDA

View Full Version : Remote and local store sync problem



Misiu
12 Oct 2013, 12:25 PM
I'm trying to create very simple application that will have 2 grids.
One main with remote store connected to rest service and second that will hold filtered data from same store but will be editable.

Idea is to have orders for all users in top grid (read-only) and current user orders in bottom grid, and those orders user will be able to edit.

Because I can't have same store connected to 2 grids and filtered in one I must have 2 instances of my same store.

My questions are:
1. When loading data to first store should I listen to load event and then populate second grid with filtered? If yes then how can I do that the best way?
2. I only want to edit data in local store (second grid). How can I connect those 2 grids so when I edit data in local store my remote store will get also updated. For example when I add new row to second grid it should be added with red mark, then first grid should call remote method to add that data and only after remote add was successful (service returned new data with id) red marks in first and second grid should disappear.
I know that this may sound complicated, but I don't know how to do that better way.

I've created a sample in jsfiddle that shows both grids with same data store, but filtered in second grid. I want to add communication between those two now.
I'll be very grateful for advice and help.


v1

existdissolve
12 Oct 2013, 6:52 PM
Just curious, but what is the rationale for splitting this into two grids? From the outside looking in, it seems like this is over-complicated by precisely one grid.

Misiu
13 Oct 2013, 12:43 AM
In finale application I'll be using Bryntum Scheduler instead of first grid.
I was asking the same question some time ago on their forum, but this is ExtJS question.

Whole idea is to sync local and remote stores, grids are only to visualyze data in stores.
Have local store editable, remote read only and sync all changes between them including server responses.

Hope this makes my question more clear :)

existdissolve
13 Oct 2013, 2:35 AM
I still don't quite understand the purpose of the grid. The Bryntum scheduler has facilities for making edits to store items, and in the context of the scheduler, it seems more intuitive to make edits to scheduler items directly, rather than transforming the data into a different view (e.g., the grid). In other words, it still feels like this approach is still overcomplicated by a factor of one grid.

But if you really want to continue down this path, it should be pretty simple, conceptually, but will require a bit of coding to forge the relationship since the "connecting" of the two stores will have to be managed manually.

So when you insert a new model into the local store, your process might look like:

Validate local model
Get remote store, add model from local store to it
Persist remote store's new model
Receive response from remote request and update local store's new model with response (since you'll need the id of the persisted model instance)

And when you update a model, the process would be similar:

Validate local model
Get remote store, use store's search capabilities to locate the correct model instance (e.g., getById(), or findRecord())
Update remote store's matched model with memento from local model
Persist remote store's updated model
Receive response from remote request and update local store's updated model with response
And of course, for deletes, the same:

Remove from local store
Get remote store, use store's search capabilities to locate the correct model instance
Remove matched model from remote store
Persist remote store's removed model
Again, I still think you're overcomplicating the approach, but I think the above should work.

Misiu
13 Oct 2013, 4:35 AM
I've modified my example to show what I want to get :)
I like Scheduler a lot, it is very intuitive and works fine, I cant argue with that.

In my example I have top grid (scheduler) that is showing all events in 3 colors (accept-green, rejected-red, plan-normal).
Idea is to allow user to easily do actions on events. Scheduler has option to add context menu to every event (I have it like that now).
In bottom grid I would like to have all events that user must decide to accept them or reject.
I think it is easier to click 2 buttons that scroll Scheduler then move mouse over event, right-click and then choose one of 2 options.

I now share the same store between 2 grids and using getRowClass I'm hidding all unwanted rows in second grid.

But again some questions:
1. using getRowClass I can set visibility of rows, but they're attached to table, so it's just CSS trick. Can I somehow supress row creation instead of hiding it?
2. I've tried configuring emptyText in my second grid, but since I'm hiding rows it isn't showing. Can this be changed?

Misiu
14 Oct 2013, 1:11 AM
So when you insert a new model into the local store, your process might look like:

Validate local model
Get remote store, add model from local store to it
Persist remote store's new model
Receive response from remote request and update local store's new model with response (since you'll need the id of the persisted model instance)
And when you update a model, the process would be similar:

Validate local model
Get remote store, use store's search capabilities to locate the correct model instance (e.g., getById(), or findRecord())
Update remote store's matched model with memento from local model
Persist remote store's updated model
Receive response from remote request and update local store's updated model with response
And of course, for deletes, the same:

Remove from local store
Get remote store, use store's search capabilities to locate the correct model instance
Remove matched model from remote store
Persist remote store's removed model

Could You please provide a basic example of doing this?

Also would it be better to populate local store with full data from remote store or just with filtered?
I would like to get functionality that I build in my example (fiddle in first post) but I would like to do it better-not using CSS tricks.

ettavolt
14 Oct 2013, 2:32 AM
I would advise to do this in a different way.

Create second store with same model, but memory proxy.
On first store load get user's records with store.queryBy() and add them to second store.
When user adds record, add it to both stores (make sure you pass instance to .add() method).
When user removes record, remove it from both stores.

Well, that's all. Now you have two collections, that contain same instances. So when you change record in one store - it is changed in another too. Then remote store will automatically sync it and after request is finished, you will have committed record in both stores.

Misiu
14 Oct 2013, 3:16 AM
Thanks @ettavolt for help, but could You help me with code?
Idea is the same as @existdissolve and mine, but I have problem implementing it.
Please see my fiddle, this is kind of functionality I want to get using 2 stores.

Misiu
14 Oct 2013, 3:56 AM
@ettavolt I've modified my fiddle so now it is working as expected, thanks for suggestion.
I didn't know that different stores can hold same instances of model (probably many newbies don't know about it)

Everything seems to work correctly except one tiny thing:
If second store contains items my second grid is populated with rows and after I validate all rows I get message 'Nothing to do : )', but if I have no rows in it at beginning that message isn't showing.

My only way of getting that to work was to set "deferEmptyText: false" but this way message is shown before load starts.
Can I change that message to show after load of store is completed?

ettavolt
14 Oct 2013, 5:30 AM
Try local_store.loadRecords() instead of local_store.add() - this will fire events required for view to refresh.

Misiu
14 Oct 2013, 7:11 AM
PM
@ettavolt thanks for help :)