PDA

View Full Version : Loading Store when Data Binded Value Changes



hallikpapa
25 Jul 2015, 9:49 AM
In my app, there is a globally available button when you click it a floating panel opens up where you can select a client. When you make this selection, I would like whatever view is open to refresh it's content based on the new selection. The simple data binding works fine, and the selected client name & ID is captured.

**MainViewModel**


formulas: {
selectedClient: {
bind: {
bindTo: '{selectedClientsGrid.selection}',
deep: true
},
get: function(client) {
return client;
},
set: function(client) {
if (client.isModel) {
client = this.get('clients').getById(client);
}
this.set('selectedClient', client);
}
}
}


When this happens, I fire a custom event so the open view knows to refresh it's contents (or perform whatever action needs to happen when the client changes)

**MainViewController**


onClientSelect: function(panel, record, idx) {
if (this.floatingPanel) {
this.floatingPanel.setHidden(true);
//Fire client changed event to child panel so those views can be updated
var cmp = this.view.down('container[itemId=contentPanel]');
if (cmp) {
Ext.each(cmp.items.items, function(item, idx) {
//console.log(this.getViewModel());
item.fireEvent('clientChange');
}, this);
}
}
}


The appropriate method in another controller is called, but what I've found is the `selectedClient` formula isn't populated when my custom event above fires. So obviously my method isn't working correctly.

In my first test example, I want to reload a store based on this new client ID. But my custom event is fired first, THEN the `selectedClient` in my `MainViewModel` is populated afterwards.

**Questions**

1. What's a better way to fire an event after the `selectedClient` binded value changes?
2. I noticed when I re-open my floating panel, it clears the binded value until I make another selection. Notice I don't destroy my floating panel, I just `setHidden(true)` above. I'd like the selection to maintain persistence until an actual change.

There seems to be a global "beforebindnotify" event, but no "afterbindnotify" event. It would be very useful to have that.

I will add that currently I set it up so it will just pass the new record to my custom event, but still curious as if there will ever be a bind finished event we can attach to. And why my data stays bound when hiding a floating panel, but when I run the showAt method a second time, it clears the bound value and nothing is selected.

nhustak
20 Nov 2015, 8:05 AM
I second this. If you have a screen with a lot of binds there is no clean way to keep a loading screen up while the binds get the screen up to date.

This is extremely annoying and, honestly, makes for a very unprofessional UI. I added an extra 500 ms to before hiding my loading mask but a lot of times, due to network lag, it's not enough. They end up seeing a 'loaded' screen with old info that suddenly updates to the new info.

I can see where it might be complicated - each view has it's own binds going on I"m sure - but I'd rather deal with having to chain up views or something than have no clean way to handle this.

Or if there is a solution, please, I would love to hear about it!