Question

I’m having problem with a “stupid” part of the code which, for me, should works straight but I don’t understand why it’s giving me problems:

controller

Ext.define('FedertrekDesktop.controller.Taskbar', {
  extend: 'Ext.app.Controller',

  views: [
    'taskbar.Toolbar',
    //'taskbar.Button'
  ],

  showWindow: function(windowName, image, title) {
    //var btn = Ext.create('FedertrekDesktop.view.taskbar.Button', windowName, image, title);
    //this.getView('taskbar.Toolbar').insert(0, btn);
    console.log("tmp: "+this.getView('taskbar.Toolbar').printMsg());
    //console.log('msg: '+this.getView('taskbar.Toolbar').getName());
    console.log('Create window '+windowName+' '+image);
  }
});

view

Ext.define('FedertrekDesktop.view.taskbar.Toolbar', {
  extend: 'Ext.toolbar.Toolbar',
  alias : 'widget.taskbartoolbar',

  items: [
    {
      xtype: 'tbfill'
    },
    {
      xtype: 'tbseparator'
    },
    {
      xtype: 'button',
      enableToggle: true,
      text: 'Tasks'
    }
  ],

  printMsg: function() {
    console.log("printmsg");
  }
});

Actually I’m just testing by trying to call that custom function (printMsg). However it seems that the function is missing, I don’t really understand why. What am I missing here?

ERROR: this.getView(“taskbar.Toolbar”).printMsg is not a function

Any suggestion appreciated

Answer 1

I solved the problem by myself with refs

The result code is this one:

Ext.define('FedertrekDesktop.controller.Taskbar', {
  extend: 'Ext.app.Controller',

  views: [
    'taskbar.Toolbar',
    'taskbar.Button'
  ],

  refs: [
    {
      ref: 'taskbarView',
      selector: 'taskbartoolbar'
    }
  ],

  showWindow: function(windowName, image, title) {
    //var btn = Ext.create('FedertrekDesktop.view.taskbar.Button', windowName, image, title);
    //var btn = Ext.create('Ext.button.Button', { text: "Bla" });
    //this.getView('taskbar.Toolbar').insert(0, btn);
    //var tmp = this.getView('taskbar.Toolbar').create();
    //tmp.add(btn);
    var tmp = this.getTaskbarView();
    tmp.printMsg();
    //console.log('msg: '+this.getView('taskbar.Toolbar').getName());
    console.log('Create window '+windowName+' '+image);
  }
});

As I understood, ExtJS doesn’t create references to views in you controller as I thought, you have to specify them!

They offer the powerful feature of refs which are documented on Controller and on ComponentQuery

After using them I feel satisfact with my code. The one I posted is just an example, but it’s not hard from that point to effectively add something to the view by using insert method.