Extjs 4 MVC Declare a variable to use in a whole controller

Question

In my controller I want to use certain variables in several places.

For example I got a form with few fields (combo / textfield) and I want to use a link to them in a various places of my controller code. How can / should I declare such variable? Usually I use:

refs: [
    {
        ref: 'myCombo',
        selector: 'myPanel combo[name=myCombo]'
    },
    {
        ref: 'myTextfield',
        selector: 'myPanel textfield[name=myTextfield]'
    }
]

But is it ok to use getMyCombo() / getMyTextfield() every time I have to work with this fields in my controller?

score 1 · Accepted Answer · edited May 23 '17 at 12:21

The "refs" feature of the controller is really just generating getter functions for you by using Ext.ComponentQuery with the provided CSS selector. The way you're using them is one way you can make use of the system, though you can also use refs to instantiate (for example) views for the controller using their configured alias or xtype. In your example, you're saving yourself the hassle of re-writing some long-ish ComponentQuery calls.

The 'autoCreate' option, although not documented, is great for this type of thing if for example you wanted to always instantiate a new instance of a certain object every time the controller is activated, you could do so in the init() function.

The answer posted here demonstrates using refs to create new instances and further explains the functionality of autoCreate and forceCreate options.

If you want to use an object or some variable throughout your controller, just set a property on the controller, most suitably in the init method...

Ext.define('App.controller.Messaging', {
    /** Include models, stores, views, etc... */
    refs: [{
        ref: 'messageBox', // creates magic method "getMessageBox"
        xtype: 'my-messagebox', // in the class file: alias: 'widget.my-messagebox'
        selector: '', // could be itemId, name, etc. Same rules as a CSS selector
        autoCreate: true // automatically create when "getMessageBox()" is called
    }],

    /** I always initialize controllers as-needed, passing the application object */
    init: function(app){
        var me = this;

        // Initialize whatever you need, maybe set up some controller properties
        this.eventBus = app.getEventBus();
        this.user     = app.getActiveUser();

        // I prevent listeners from being established twice like this..
        if(this.inited === true)
            return;

        this.inited = true; // nothing past this line will be executed twice

        // Observe view events
        this.control();

        // Listen for application events
        app.on({
           'getMessages': {fn: me.showMessageBox, scope: me}
        });

        // Specific controller events
        this.on({
            'someEvent': {fn: me.someFunction, scope: me}
        });

    },

    // A function using controller properties defined in the init() method
    someFunction = function(){
        var me = this; // controller

        // Lets show the active user
        console.warn("Active User", me.user);

        // And then fire an event, passing this controller
        me.eventBus.fireEvent('somethingHappened', me); 
    },

    // Invoked on the application event "getMessages"
    showMessageBox: function(sessionId){
        var me = this; // controller

        /** ... Load the messages for the provided sessionId ... */

        // Then create an instance of the message box widget as property on the controller
        me.messageBox = me.getMessageBox({ 
             /** pass config to the view here if needed */
        });
    }
});

Extjs 4 MVC Declare a variable to use in a whole controller

1 Answers1