How to work with controllers for Extjs deeply nested components?

Question

I have a large scale application with lots of views, models, stores in it. Till now i am able to manage all the functionality to run from functions, events withing the views itself. I have never used controller to handle the entire application.

Please let me know how to use controllers to handle each and every component in the app. And there are some components that are dynamically being generated. How to add listeners these components on demand.

Please tell me about controllers much!

Thanks in advance :)

Answer 1

Controllers use event selectors to handle events through an event bus, so handling events is built in to the component structure.

A controller typically looks like:

Ext.define('MyApp.controller.Foo', {

    init: function() {
        this.control({
            'some_selector': {
                someevent: this.onSomething
            }
        });
    },

    onSomething: function() {}

});

The selector is an Ext.ComponentQuery selector, so if a component that matches that selector fires a particular event, it will call your method. There's plenty of information about selectors in the docs.