Declarative Listeners vs. Control

Back in ExtJS 5 Sencha rolled out a rather cool concept of declarative listeners, where you could write something like this:

{
    xtype: 'button',
    handler: 'onButtonClick'
}

…note that onButtonClick is a string, rather than a function reference. The idea here is that the actual function would be resolved at runtime and will be located somewhere in the ViewController world. It was described well by Don Griffin in his blog post: https://www.sencha.com/blog/using-viewcontrollers-in-ext-js-5/.

However, what was omitted in this blog post and the guides, is the potentially powerful and risky “up the component tree” resolution of the ViewController. Read on to learn more with a Sencha Fiddle example…

Here’s what happens when you use a declarative listener:

1. During run-time when the event is triggered, ExtJS will attempt to locate the listener function based on the string name you provided
2. The following assumes no “scope” was specified in the declarative listener configuration, or a “controller” scope was used
3. ExtJS will attempt to locate the listener function in the ViewController of the view
4. If our View has its own ViewController, but the function does not exist there, ExtJS will produce an error (in the console) and stop looking
5. If our View did not have a ViewController, ExtJS will attempt to search .up() the component tree from our view, for the first view that has a controller
6. Steps 3 and 4 will repeat at this point, but with the ViewController of some other view higher up in the hierarchy

This is rather different from the traditional “control” statement in controllers, where ComponentQuery is searched downwards for the first matching view, where to listen the event for. In the case of declarative listeners, ComponentQuery is searched upwards for the first matching ViewController to fire the function.

This introduces a rather interesting paradigm that can be used in conjunctions with the old paradigm as well. Consider the following Fiddle that I put together to demonstrate:

https://fiddle.sencha.com/fiddle/1jml/preview

The only piece of advice I have in this regard is to advocate that “when you use declarative listeners, those functions are expected to be on the immediate view controller” as to avoid the confusion and caveats of the whole “upward CQ search and potential error”.