Results 1 to 7 of 7

Thread: How to achieve application level controllers?

  1. #1
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    24
    Answers
    1

    Default How to achieve application level controllers?

    Hello everyone,

    we are planning on updating our extjs 5 application to extjs 6.6

    One major problem we have right now is "application level controllers":

    Previously, we just required all controllers at startup (as instances of Ext.app.Controller). As it seems to be impossible now to use Controllers (they do not seem to listen to any events at all), we switched to VIewControllers.
    But, if I understand it correctly, ViewControllers are bound to a view.
    So a view controller is only listening to events once it is initialized. And it gets initialized when the view is rendered.

    We have many cases where we want a functionality kind of like this:
    - If a tab has not been opened (i. e. never been rendered before), open that tab
    - Then do xyz in this tab

    Before we just had that logic in the controller for this module.
    Somthing like this:
    Code:
    init : function () {  
          this.control({
                '*': {
                    filedeleted: this.onFileDeleted,
                    filesdeleted: this.onFilesDeleted,
                    filesreplaced: this.onFilesReplaced,
                    picktemplate: this.onShowTemplatePicker
                }
            });
        },
    What is the best course of action to do it now?

  2. #2
    Sencha Premium Member
    Join Date
    Nov 2013
    Posts
    160
    Answers
    5

    Default

    I am using version 6.2 and app controllers are still supported. I assume they also are in version 6.6.

    Just extend Ext.app.Controller and register any listener functions in the init method.

  3. #3
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    24
    Answers
    1

    Default

    Thanks for your answer.

    If I replace Ext.app.ViewController with Ext.app.Controller in the following example:
    https://fiddle.sencha.com/#view/editor&fiddle/24ia

    then an error is thrown:
    controller.setView is not a function

    If I change it like this:
    https://fiddle.sencha.com/#view/editor&fiddle/3222

    apparently the click event is not listened to in the controller

    what am I missing here?

  4. #4
    Sencha Premium Member
    Join Date
    Nov 2013
    Posts
    160
    Answers
    5

    Default

    That's because a ViewController and a Controller are not the same thing so they don't contain the same methods. An app controller isn't tied to a view so it doesn't have a setView method.

  5. #5
    Sencha Premium Member
    Join Date
    Nov 2012
    Posts
    24
    Answers
    1

    Default

    Thanks again.

    But how do I listen to component events in an app controller?

    Please also see this fiddle:
    https://fiddle.sencha.com/#view/editor&fiddle/3222

    here the listener in the controller has no effect

  6. #6
    Sencha Premium Member
    Join Date
    Nov 2013
    Posts
    160
    Answers
    5

    Default

    What I do is listen for component events in the view controller and then have the view controller fire an event when the proper component event occurs. The app controller then listens for events coming from the view controller. This makes the two controllers more loosely coupled so they each can change over time without affecting the other (as long as the events being fired/listened for do not change).

    Also, the app controller usually doesn't need to know about every component event so these can be handled directly by the view controller. This way you don't have to fire off so many events to the other controller. Only true "application level" events should be handled by the app controller.

  7. #7
    Sencha User
    Join Date
    Oct 2018
    Location
    Noida
    Posts
    67
    Answers
    10

    Default

    Hi siggi,

    If you want to perform some action on application level, you can use GlobalEvents provided by ExtJS.
    you can fire event like below syntax -
    Ext.GlobalEvents.fireEvent('{eventname}', [arguments]); // fireEvent() argument is same as fire() arguments.
    and you can listen above event is any of the viewcontroller with listen config -
    https://docs.sencha.com/extjs/6.6.0/...tml#cfg-listen

    Also another way is you can fireEvent on any controller and give some id to that controller. THEN you can handle that event in any viewController with again listen config. In that listen config you need to provide controller object and inside that you can give id of the source controller.
    All the way to listen event is described in above url in ExtJS library.

    Also the fiddle you gave above https://fiddle.sencha.com/#view/editor&fiddle/3222 is also working with very little change. Basically you have created a app controller but you haven't tell the extjs application that it needs to include that view controller. So you need to use controller-config of Ext.application, and give the class name there like below -

    Ext.application({
    name: 'Fiddle',

    controllers: ['DevToolsTraining.view.login.LoginController'],


    launch: function () {
    new DevToolsTraining.view.login.Login();
    }
    });

    Hope that helps !

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •