0

First of all I know how to set a LoadingMask for a component but have a problem with the uncoupling of the system I am making so I am just looking for a hint/idea.
I am using a MVVC architecture and in the View I have a Container with several Components in it, one of which is a Grid.Panel. The grid is bound to a store and has an event that when fired calls a method of the store. The following code happens in the ViewController: 

functionForEvent() {
    var store = getStoreForThisGrid();  
    store.update(Ext.getBody());  
}

What happens now is the update() method makes a request to a server, that updates the store itself and the view component, and I need the loading mask during that time. How I handle the situation right now is I pass Ext.getBody() (or a DOM Element representation of a specific component) to the method and it deals with that reference. This function part of the store that is attached to the Grid and resides in the Store: 

update : function (el) {  
    el.mask();
    makeRequest();
    el.unmask();
}

What I am looking for is another way (Pattern maybe if such exists for JavaScript) to access the View component from the Store instead of passing it around because that does not seem like a good practice and couples the system.

Since I come from a Java background I would have used the Observer pattern but cannot find how to apply this in JS.

PetarMI
  • 390
  • 1
  • 7
  • 15
  • Without the code, it's hard to suggest anything – Ruan Mendes Jul 07 '15 at 20:10
  • Added relevant pseudocode. I feel there is no need to burden with extra stuff that are irrelevant to the question. – PetarMI Jul 07 '15 at 20:23
  • 1
    Again, it's hard to tell without code, but your store should not know about any views (or HTML elements), your views can register for store events and display the mask as necessary. Your pseudo code or update doesn't work, you'd have to call unmask. – Ruan Mendes Jul 07 '15 at 20:26
  • 1
    Javascript has [Observers](http://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript), although it appears not to be broadly supported yet ([MutationObserver maybe?](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)). Not sure if ExtJS has a specific method for extending this as well. KnockoutJS offers observables, but this may conflict with ExtJS. – Jared Farrish Jul 07 '15 at 20:27
  • @JaredFarrish Ext-JS already has the [Observable](http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.util.Observable) mixin, every [component](http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.Component) has it, [stores](http://docs.sencha.com/extjs/4.2.3/#!/api/Ext.data.Store) also have it. – Ruan Mendes Jul 07 '15 at 20:28
  • @JuanMendes - Thanks. My comment deals specifically with the OP's last statement about Observables in Javascript. – Jared Farrish Jul 07 '15 at 20:30
  • 1
    @JaredFarrish And I'm just saying the framework the OP uses already provides an implementation. The link you have provided is a custom implementation; moreover, MutationObserver is not something that can be reused to allow any object to be oberved – Ruan Mendes Jul 07 '15 at 20:31
  • Thank you for the suggestions. I will look into those store events that the view can register to. Also it works, I call unmask() - just need to uncouple the View from the Store. – PetarMI Jul 07 '15 at 20:32
  • @PetarMI My "doesn't work" comment was missing an ending :) I meant to say that it wouldn't work because you'd have to call `unmask` after the operation ended, that is, in a callback. Hopefully you're not using the [deprecated synchronous XHRs](https://xhr.spec.whatwg.org/#sync-warning). – Ruan Mendes Jul 07 '15 at 20:36
  • I understand now, thank you for the note. I am not using any synchronous calls. – PetarMI Jul 07 '15 at 20:41
  • It all should work out of the box. The grid's underlying [dataview](http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.view.Table-cfg-loadMask) will have a [loadmask](http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.LoadMask) **automatically bound** to the store in the best non-coupling fashion. The mask will show when the store is interacting with the server side, and hide when it finishes interacting. Why reinvent a wheel? Does it not work for you? – Greendrake Jul 08 '15 at 02:02
  • Possible duplicate of [Event driven programming in Ext JS](http://stackoverflow.com/questions/12932325/event-driven-programming-in-ext-js) – Paul Sweatte Feb 07 '17 at 00:38

0 Answers0