Question

This could be a very basic Javascript I know but I just can’t get it..

Ext.regController('Chat', {
    initSocketConnection: function() {
    this.chatStore = new App.Store.Chat();
            ...
    this.socket = io.connect(settings.get('server'), {port: 8080});

    this.socket.on(
        'message',
        this.addMessageToChatStore
    );

},

addMessageToChatStore: function(message) {
    console.log(message);
        console.log(this);     << console shows the 'this' has become SocketNameSpace
    this.chatStore.add(message);   << this line error with "Undefined" chatStore

    this.send(message);
},

Console print out shows that the "this" in the addMessageToChatStore function is "SocketNamespace"

How to I get rid of the error?

To generalize the problem. I think it’s better to describe it as function chain calling dilemma.

A class has some local var that’s instance of another class. When this var listens on certain events, it calls the parent’s class’s method. The problem is when this method is called, it’s under the context of the other class and hence the scope has changed and the access to the original parent’s class methods are denied.

Answer 1

In javascript, the this variable is determined by the caller. You could use a self executing function to ensure you’re referencing the correct entity rather than using this:

Ext.regController('Chat', (function() {
  var self = {
    initSocketConnection: function() {
      self.chatStore = new App.Store.Chat();
      ...
      self.socket = io.connect(settings.get('server'), {port: 8080});

      self.socket.on(
        'message',
        this.addMessageToChatStore
      );
    },
    addMessageToChatStore: function(message) {
      console.log(message);
      self.chatStore.add(message);
      self.send(message);
    }
  };
  return self;
}()));

Update

Based on the full snippet, I’m not sure where the render function is defined, if render is a global function then self.viewChat = render({xtype : 'App.View.Chat'}); will suffice, otherwise it may be defined on this (the this that is defined for the call to index) so the following may suffice self.viewChat = this.render({xtype : 'App.View.Chat'});.

If I were a betting man, I’d go for the latter, so the code would be (with commented out code removed):

Ext.regController('Chat', (function() {
    var self = {
        index: function() {
            if (!self.socket) {
                self.initSocketConnection();
            }

            self.showChat();
        },
        /**
         * init the socket connection to the node.js server
         * using user settings
         *
         */
        initSocketConnection: function() {
            self.chatStore = new App.Store.Chat();
            self.chatStore.add({
                user: "Figo",
                message: "Welcome!"
            });
            self.configStore = Ext.StoreMgr.get('ConfigStore');
            var settings = self.configStore.getAt(0);

            self.socket = io.connect(settings.get('server'), {
                port: 8080
            });

            // Event Listener
            self.socket.on('connect', self.registerUser);
            self.socket.on('message', self.addMessageToChatStore);
            App.on('newMsg', self.sendMessageToServer);
        },
        sendMessageToServer: function(msg) {
            self.socket.send(msg);
        },
        addMessageToChatStore: function(message) {
            console.log(message);
            console.log(this);
            console.log(this.parent);

            self.chatStore.add(message);
            self.socket.send(message);
        },
        registerUser: function() {
            self.configStore = Ext.StoreMgr.get('ConfigStore');
            var settings = self.configStore.getAt(0);

            var user = {
                nickname: settings.get('nickname'),
                gravatar: settings.get('gravatar')
            };
            console.log(user);
            self.socket.send(user);
        },
        /**
         * Show chat view
         */
        showChat: function() {
            if (!self.viewChat) {

                self.viewChat = this.render({
                    xtype: 'App.View.Chat'
                });

                self.viewChat.query('#settingsButton')[0].on('tap', self.showConfig, self);
            }
            self.application.viewport.setActiveItem(
            self.viewChat, {
                type: 'slide',
                direction: 'left'
            });
        },
        /**
         * Show config View
         */
        showConfig: function() {
            Ext.dispatch({
                controller: 'Viewport',
                action: 'showConfig'
            });
        }
    };
    return self;
}()));