How do you keep nested tables in a window? Who does what?

Question

ExtJS/Sencha

We have a grid, by clicking on a line a window opens and is filled with data, but it also displays two more tabs in each of which has one more grid.
It is convenient to take window data from the record of the main grid, and load the data of the other two grids via CRUD with separate requests. It's simple and transparent.
But how to save their changes?
Option 1
We save the field data in the main grid by pressing the save button.
Two internal grids are saved immediately after editing via autoSync=true.
+ Everything is easy and fast
- If you click "cancel", then the saved data in the internal grids will remain changed, this is very bad.
Option 2
We save the field data in the main grid by pressing the save button.
The two internal grids are also saved after clicking save.
We do this through parallel requests or a sequence (Promises) and realize the result of success or not.
+ Harder and longer
- If some of the requests are not saved or the validation fails, then some will remain already saved. Do they need to be rolled back? The user may decide to close the window and think that nothing will be saved.
Option 3
We save the field data in the main grid by pressing the save button.
The two internal grids are loaded from the sub-record of the main grid and are also saved via the field of the main grid.
Saved by one request, the server works with the data of several grids itself.
+ Harder server
- Not explicit and complex CRUD architecture of nested CRUD tables (for internal tables, you need to do removed, modified, created keys and transfer the changed data for batch changes).
How are you doing? What difficulties and solutions have been obtained with experience?